إعداد 


م. يوسف صالح الجرعي 


الاضدان الأول 
سس مم ا 


© دع . لالالالالانا‎ ١-3112 


02 . ز 0/3110 .2000 6 
2ط اماع33 1 /مامه.اع] ]انلا ©6 


فهرس الكتاب 
مقدمة 25 
حول الكتاب والاستفادة منه ا ا ا ااا 
الباب الأول : مقدمة عامة ل ا ا يا ااا اا 00011111 
الانترنت ا اةةةةمم#دة0ةا3ب 83ع0ع60»0ا ١‏ ا 02 0000000 
أنواع المواقع الإلكترونية ا3333339ِ_ٍٍِِتٍت7_333_ج3ت3ت9ْ9ْ9ْ7ْ77ْ7ْ:ْ:ْ:ْ:ت: ا ‏ ر 000 
طريقة عمل المواقع الإلكترونية لكريلل4 2 2 00 0 2-2 2 22 000000000000000 0590| 
الناب الثاني 1811/1 كك آ 8 "كش الحفلجاوس 2222999 100000000000252 
البداية مع .111311 ك©"<مم_ أحؤْخْْبمموئ1فشئئئيهْلخ>تكك8696لاالخلظْن 000004000000002( 
إنشاء صفحة ويب 23-2 
علامات ترميز 1385 1/1 1لا ا ا اي ا ل ااا ااي 011 
محرر الك 1113211 (1311] ,مذألع ) 5 اق جص الا ون يع د ون لدو حا ون اد اط سا ع و عط سم مق ا عط 4 و 1 117 
عناوين الك 5123/11 2713/1 وعسصتلدء] ) و١‏ ل سس ملستت م1 
فقرات ال111211 (111311 قطمممعدعدم) 8 ا ل ال ار 1 
روابط 1ل-111311 111311 وعلصنآ) خخ ١1000000111022‏ 
التعامل مع الصور ال .112/1 (.1112311 5ء138) ا ‏ ل.. ‏ يا.. # ا ا ال 7 م ام ا ا 71 
رأس ال .1113/1 (113/1] لدعط) 3و3 0 000 7077777ا0707ا0ا0ا0ااااااا 0 
تفسيق خص ال 111/1 (16108همءه2 11821) ا ا ل ا ا ا 
خصائص الخطوط في اكء 8113/1 زغأممة اللتن) 00 1 100001 
الجداول في اك 111111 (11131 وعاطهة1) اا ا 000 0 
القواكم في ال 1117311 111311 5اوذنآ) 1*#1319آ#1ذ1ذ73*331أ7أخ60606070١6ااا‏ 2 
تطبيق عام حول ال .111311 ا ا 000000[ 1[ 1 12101111 
خطوات التطبيق اا ة ة ة ةةةة ليأ 5 
شرح كود التطبيق 117311]) ااا ول 
الناب الثالث 6055© ب 122 
برنامج الدريم ويفر (056 اعناوع للامطوع0] عط ه8600) ا 00000 

53 


ماهى لغة او تقنية ال 55 ؟ 0000 
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طرق العمل على الادى اي ل ل 


عناصر هامة تستخدم ال 055 في ال 1/11 تن (ازه - مروم5) 50 
كود أو وسم الدالا0 (186 دممأدأ/زه) ]| 
كود أو وسم الات 52 (186 /0ثم5) 000100230010000 
طريقة عمل ملف ال55ى وربطه بصفحة الموقع . 00000 
خاصية الورائة 700000 5## 
الكلاسات والهوية في ال 055 (10, 013555 055) 00 
خاصية الك 0135565 لل و ورد وا ل 


خصائص الضبط في ال55© 2009 


خاصية الطول والعرض (اطواء 2 300 015 نالا 055) 00000 


خاصية زوايا الحدود (20115:-,ع560:0 055 ) 00 
خصائص النصوص (ده 0)ءم520 ع1 055) ار و 1 
خاصية الاتجاه (م5ناءء١01)‏ 0 
خاصية الإزاحة (عمأل550) مسية... لصي ... /دةا.... 13 ...أل 


خاصية ( اللون - الحجم - اسم الخط - أخرى ) ا 0 


خاصية الظل 553001 6)اع1) 0 515 


خاصية التعليق (كامعممهم0) 61 لا نا لاك دك اده وا ا و 
القوائكم (دلم»/١)‏ 0 
خاصية الحركة (عع3:01/١)‏ 77 22# 
خاصية الخلفيات (0مله:8/ء83) ا 0 
خواص الخلفية (+دعمع:-ل0صنممعاء83 ع مسأ أوهم-لصنممعكاء83) 


اضافة الخطوط للموقع ل 


الباب الرابع 2117 يك .215501 00ب ش13 
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2 . تعسعدط/دمهه . 18 | 


البرمجة | مده . 20202 3ط- مده 1 . لامها 


مقدمة حول ملام ااا ةا 5:ة ا :06 5 
لغة البي انش بي (0م) ايا دبدببب0101 1 
متطلبات بي اتش بي ااا 11 
السرفر المحلي وطريقة يقة تركيبه (عنااء5 ممقنىا) 0 #ككل8 540 6:656260ر/رطرط/ر:/ر/:/:ا6ر/:/:ر:656ر5ط/:6ا:ا:ا6ا:ارارارارا 0000 
طريقة عمل السرفر (اءع/مء5 ممق نللا) شوو طعا طلم فاط ذه امود المافد لطع نو طن 4 ل ف اا 34 ف ف الوه دجن لان فا للد فطل اق ل ف لك اق رن ل 4 3 2 11 
اول تطبيق في (5لام) 033*03030-0-327 0 000 00 ااا 
تضمين كود 0180م في صفحات الويب “(639 6 7ج7ت079707077م7مرميم0مم9:0:0:0:0900:]:؟]:]؟] 20 
تضمين التعليقات في الكود 00000000089 د20 
أنواع البيانات في مله ا 11 1 1070( 
القيم المنطقية (0د6١8001)‏ اا اا ا اا 0 0100000 
قيم الأعداد الصحيحة (دعوء:م1) ضنة لو ل نشوا نولل لم ليأ شد ول ل ل ا اك للك ا ل 1# ل ا ل أ ام تفط وما ل 14 
البيانات المركبة (دءم/ا1 033 0صناهمممره©) ا ا ل ا ل ا ا ا 1 
المصفوفات (4113[/5) م ا ا سم مس لول سا ام تم ا ا ل فا 
المتغيرات (ده1/301301) ا ا ا ا ا م ا ا ا ا لا 
التعبيرات (ددهاأددع:مع«ع) انيد ونم تر عق زناه ناعرو جر اال عاق ةنع خرة ققدت لل قوز وو ا ا 
عوامل الاسناد أو التعيين (0:5غ2)ءم0 أمع ممع أدكم) اا مط #اسلان و ل الل ل 7 ا ا ا 
العوامل المنطقية (5:ه:22ءم0 ادع أعه٠)‏ ااا ااا ااا ااا 000 
عوامل المساواة (5,هغ3,عءم0 ب6ذادباوع) لجخ خا شأأةة>> 2 ©ح©ج مج راضخ 1000201111 
قواعد التحكم (وع لاع ناء5 اأمغخممع) ا 010-00770711 0 11010000 
تعليمات الشرط (وأمعممع]2غ5 ادمه1لممه) اا اا ا ا 0ل 
تعليمة 15) أمعممع غ562 1 ع1 اا اااي ااا از[ [ز[ ز ز [ 1 ا 
تعليمة التبديل (أمع ممعغ3غ56 طاع] بيد ع15) مخ وا او اط فر تع ودع ووم ةلالطا الا لطا تم ا ع ولد وله لم الو 111 
تعليمات الحلقات او الذكرار (كاصمعمعغ562 عمأمه0ها٠)‏ تسوج اع لع مق ل وان اماف نوللاه قا مام د ا ا ا 
تعليمة عاأانلا (أمعممعغ3غ56 عانطن عط1) قود ات اعدو سونال اطق شه أن مع سل ا امت طعا عه ولمع له 0 لمعم ا ا ا ج13 
تعليمفة عانطنى 00 (أمع ممعغ ج56 عاتطن مل عط1) 0 
تعليمة 00]) (أمم ممع ]خ56 ,م1 ع15) 000[ [ 1[ [1[ز[ذ1[1 1[ 1 1[ [ 1[ ا 
الدذوال (دممءءصبط) ا لق رافق اناف لو ةن طن اف قلاف عقاف باط اف 1 31314 عق سقف 1ق لق نل لط أ ل للا مال مالو للا ا ا 11811 


المصفوفات (5/ا4113) لظ 


نماذج الإدخال (5:ه؟ 11/1 لا) 510070000 
حقول الخنص (5واء61 *76) 00 
خيارات الاروع<«هماءء طك) 11 1 1211711101 
00 الإرسال (مماباظ أأمصطيك) 00ظ5ظ5”'( 
القاكمة المنسدلة :ذا م/ناه0-مه0) 000 
منطقة الخص (دع3 <«هء1) 01 
دالة 5057ه_5 وآع5_6 ا 


تطبيق حسابي باستخدام الدوال والفورم 0 


مأ كلإ ا/اام ام مصخ ا دبالا ااا11ذظ[2 
عمليات ١5ذمل‏ هلإطمطم 2#ظ1 


إنشاء قاعدة بيانات ا اام 000 
إنشاء جدول في قاعدة البيانات و 
إضافة بيانات (صفوف) إلى الجداول م 7-7 م 0 
تعديل وتحديث في قاعدة البيانات 0 
حذف صف أو ببانات من الجدول بغ ب بس | 
ربط منزم هع ال 5لا 00000 
إدخال البيانات بواسطة ١١/577‏ 0000 
إخراج البيانات بواسطة 5187 0 
تعديل وحذف البيانات بواسطة (ع7غاع0 - ع5087هلا) 
التعامل مع الصور ع اناف لاوط ءا تلط ماقي 1ل 1 3 211 95101 
الحماية بواسطة ال/١5255101‏ 11 * *ه*ظ2 
الكوكيز (6200115) 20-0 
الفرق بين ال 5855101١‏ والكوكيز 200115 000 
تطبيق الكوكيز 30011110« 


ع0 زالجي كوبيري ا 
القوالب الجاهزة 0000 
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تطبيق عام حول 508 يت 055 2 1101لا © 501لاا/ا 


المرحلة الأولى (التصميم) اه 


المرحلة الثانية (قواعد البيانات) 00000 


مرحلة ربط قواعد البيانات مع التصميم 0 


خطوات رفع الموقع على الاستضافة 520 


الباب الخامس جوملا ا 


جوملا (8ا1001/1) 111111 


تنزيل جوملا من الموقع الرسمي وتركيبها 1 


لوحة تحكم جوملا اا 2717ظظ15 


عه 


إنشاء الأكسام 0000000 ش23 
التحكم بالمجلدات والصور 500000 5*ظ*ظ1 
إضافة مقالات 00000 
القوالب (5وعغ3اصممع[) ا 0000 ظ1ظ1 
أماكن الموديولات (كصه]أومه عابالهوال/31) 500 
تركيب الموديولات 11100 


٠» ٠و‎ 


واثه ليع اه عه 
إنشاء الفائكمة وربطها بالاأكسام 6 00طظ5 


تعديل وإضافة شعار للموقع 00 


التعديل فى ملفات القالب (ملفات ال255) 0 


إضافات التواصل والمواقع الاجتماعية 570 
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لحرا 


ربط الموقع بصفحات التواصل 0000 


تعريب الموديولات اسقا ا اا مساة لو ا ة 


إضافة موديول البحث 12111100 


تركيب المحرر (128) ا 
إضافة الحقوق للموقع 00 


إضافة عنوان ريسي للموقع 0 


إضافة البيانات الوصفية 59100 


حذف البيانات التجريبية 000 


+ #ووووو 


تجهيز نسخة من الموقع للرقع 08 513537 
تركيب الموقع ااا ااا 


الباب السادس 550 لنكلما 


مقدمة حول محركات البحث و 50 0 


نصائح عامة لتطوير استرانئيجية جيدة في (550) 


أساسيات ( 8251 0ع5) # صة سب به 


تحسين هيكل الموقع الالكتروني 30 
التحسين الامثل لمحتوى الموقع 5 
التعامل مع خوارزميات او برامج البحث ش22 
متابعة وترقية الموقع الالكتروني ا 00 


أدوات مفيدة لتعزيز نجاح الموقع في 0ع5 006 


معد الكتاب الالكتروني امن كن لق انلام للع ا 
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/1؟5 


5 


5 


تعلم اليرمجة 
عع | خم تنا 1 العام البرمجة 


يا تتتيي]) عودع عيا| | 713 


تحميل المزيد من الكتب 


70 . 211303 3 ط-:2211 © ل . تانباي 


 . 022 /‏ :0012/3321 . غ01 هطع ج32 غ2 . اناما / / : ة8ط7طغط 


بسم الله الرحمن الرحيم 
الحمد لله والصلاة والسلام على حبيبنا محمد (صلى الله عليه وسلم) وعلى اله وصحبه وسلم وبعد : 


بداية نتمنى من خلال هذا الجهد المتواضع (كتاب تصميم المواقع الالكترونية) أن يجعلها الله في ميزان حسناتنا وأن ينال رضى 
واستحسان القارئ الكريم وأن يستفيد منه في حياته العلمية والعملية كما ونتمنى كل من يستفيد من هذا الكتاب ان يدعوا لنا ولوالدينا 


بالهداية والمغفرة والعفو والعافية والتوفيق دنيا وآخرة. 


إن هذا الكتاب الالكتروني يعتبر البداية لكل مبتدأ في عالم المواقع الالكترونية ومحطة انطلاق في تعلم كل جديد وما يفيد في تصميم المواقع 
الالكترونية واشهارها في محركات البحث وكان الغرض الرئيسي منه هو تعلم انشاء مواقع الكترونية بواسطة نظام ادارة المحتوى 
(!71002218) وبقية الفصول تم تعليمها لكي نعرف كيف نتعامل مع المواقع الالكترونية وكيف تعمل كماهي ايضا لمن يريد البداية في عالم 
المواقع. وللعلم فإن جميع الشروحات في هذا الكتاب وكل خطوة فيه تم تنفيذها وتطبيقها ونقلها كما هي شرحا وصورة وذلك ليكون التعلم 
مبني على اساس التجربة والخطوات الصحيحة وبكل وضوح بعيدا عن الغموض والسرعة وتعدي الخطوات. كما يتم سرد الاساسيات قبل 
تنفيذ عمل جديد ولذلك لابد من الانتباه في التسلسل والفهم لأن أكثر الخطوات تتطلب فهم واستيعاب التي قبلها. 


هذه هي النسخة الاولى من الكتاب وسيليها نسخ جديدة بتعاونكم أيها المستفيدين والقراء واقتراحاتكم واضافاتكم اليه عن طريق التواصل 
معنا وابداء الآراء وتصحيح الاخطاء ان وجدت. جميع التطبيقات في الكتاب بدء من 2117/11 » 7112 ٠» )055 ٠‏ 700173114 تم ارفاق 
رابط لجميع ملفاتها والتي تم تطبيقها خطوة بخطوة ويمكن الاستعانة بها وقت الحاجة. 


كما يتم من خلال هذا الكتاب فتح مجال التعاون التجاري والشراكة في مجال تصميم المواقع الالكترونية واشهارها واستضافتها عبر رواد 
التكنولوجيا والراعية لهذا الكتاب لمن يرغب. ستوفر رواد التكنولوجيا استضافة لكل من يرغب في عمل موقع الكتروني سواء خاص او 
تجاري وسنوفر ما يلزه من الدعم والحماية والمساحات الكافية لكل متعامل معنا. كما تقوم رواد التكتُولُوجِيا بالتعامل مع كل من يقوم بعمل 
مواقع الكترونية ويحتاج للدعم خصوصا في نظام ادارة المحتوى (!7001312). وليس فقط من يقوم بعمل المواقع الالكترونية بل تم فتح 
مجال لمن يرغب بالتعامل معنا في مجال تسويق المواقع الالكترونية بالعمولة والتي لا تقل عن 70١5‏ لكل موقع يتم التسويق له او بإحضار 
عملاء لرواد التكنولوجيا دون ان يتحمل المسوق أي تبعات تصميم او فنيات أخرى. 


هذا والله ولي التوفيق»» 
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حول الكتاب والاستفادة منه 


كناب دورة تصميم المواقع الالكترونية 


سواءً كنت حديث العهد أم خبيراً في التعامل مع المواقع الإلكترونية» سيعلمك الكتاب طريقة انشاء المواقع الإلكترونية وطريقة عملها بدون برمجة 
معقدة. وليس المواقع الالكترونية فقط ؟ يقدم الكتاب ايضا أيضًا رؤى فنية مفيدة حول إشهار المواقع بشكل عام نظريا وعملياً. 


ما الذى ستستفيده من الكتاب ؟ 
بإمكانك إنشاء مواقع إلكترونية وباحترافية بأنواعها بمساعدة الأنظمة والبرامج الحديثة» علاوةً على خبرة في مجال المواقع والتوسع فيها يمكنك من 


خلالها شغل وظيفة وبكفاءة في نفس المجال وتوفير الأموال بالنسبة للمؤسساتء فضلاً عن إمكانية الدخول في عالم التجارة الإلكترونية بدون برمجة 


وتعقيد وفي وقت قصير. 
من يمكنه الاستفادة من الكتاب ؟ 
يدعم الكتاب كل الاشخاص الراغبين في تعلم انشاء المواقع الالكترونية والخريجين والمهتمين في عالم المواقع الإلكترونية والتسويق الإلكتروني» وكل 


من لدية خبرات تسويقية ويحتاج لخبرة إلكترونية واهتمام في تنشيط تجارته ومؤسسته إلكترونيا والإعلان عبر الإنترنت ومن يبحث عن مهنة 


ومهارات جديدة وحديثة. 
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الباب الأول : مقدمة عامة 


الانترنت 

ظهرت شبكة الإنترنت نتيجة لمشروع أربانيت الذي أطلق عام 555١م‏ » وهو مشروع من وزارة الدفاع الأمريكية .أنشئ هذا المشروع من أجل 
مساعدة الجيش الأمريكي عبر شبكات الحاسب الآلي وربط الجامعات ومؤسسات الأبحاث لاستغلال أمثل للقدرات الحسابية للحواسيب المتوفرة. 
في وقتنا الحاضر أصبح الإنترنت من أساسيات التواصل والأعمال في جميع أنحاء العالم ويوما بعد يوم تزداد اهمية هذه الشبكة العملاقة التي جعلت من 
العالم قرية واحدة. أصبح الإنترنت بوابة للاقتصاد والسياسة والتواصل الاجتماعي لشعوب العالم ولاشك أيضا أنه اصبح العالم الرقمي الذي يتواصل 
الناس من خلاله تحولت جميع التعاملات التجارية وغيرها من العالم الحقيقي إلى العالم الرقمي ويعتمد عليه الكثيرين من التجار والباحثين والمؤفسسات 
بمختلف مجالاتها. 


هي شبكة عالمية تربط بين حواسيب العالم وتسمح بتناقل البيانات بمختلف انواعها وبنطاقات (حجم التناقل ) مختلفة منها ما هو عبر شبكة محلية أو 


5 


عالمية. 
ماهي مواقع الإنترنت 


عبارة عن صفحات مبرمجة بأي لغة من لغات الويب تقوم بعرض وأخذ البيانات على شبكة الإنترنت. وتختلف المواقع عن بعضها من ناحية عملها 
وبرمجتها وطريقة عملها .ومن أمثلة لغات البرمجة المستخدمة في برمجة المواقع 


15خ 1 14 511711 111-501 11لا .كي - 854515 12414 1115001 اخت 2ط 


ع آي ع يفي «٠‏ »٠و‏ 
أنواع المواقع الإلكترونية 
مواقع ستاتييك : مواقع عادية تحوي صفحات ثابته لا تتغير إلا برمجيا بتغيير الكود الخاص بالصفحات وتقوم بعرض البيانات بشكل ثابت كما أنها غير 


تفاعليه أي لا تحوي قاعدة بيانات لإدخال وإخراج البيانات. وهي الأقل استخداما على الإطلاق ويتم برمجتها غالبا ب لغة الوصف ر[111171. 


مواقع تفاعلية : مواقع تحوي صفحات انترنت تفاعلية تقوم بعرض البيانات من خلال قاعدة بيانات تستوردها الصفحات لتعرضها للمستخدمين وتقوم 
الصفحات ايضا بإدخال البيانات إلى قاعدة البيانات من خلال المستخدم المتفاعل مع الموقع سواء مدير الموقع او الزائر. وهي الأكثر استخداما ويتم 
برمجتها غالبا بأحد اللغات البرمجية التالية: 5151571512 .5001 7161 4512.111 - 124141845115 501 1197 طاتر 12م 
5 . 
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طريقة عمل المواقع الإلكترونية 


مبعوبنوء8 6طء/لا 


مأاعا عه عومم عمللا ه أوعياوعة؛: نمم 
#عوبنلممجا اع للا عنامب! 


عع الرعذ عدمهلا صتهحصمما 9 
عط أه عحضمض وتأمحصممل عغطة اعمط 5لام)] ٍِ 
عط دلصا] لصه لعمعتامع ينمبز ع زواع /لا 2 
؛عبمعو واع/لا 15 05 000155 8 
6 ع8 

معبمعذ اء/غلا لء:وه ل : 

ذا 


عط؛ عأعوط ولذترهد ععبمهو اعللا وام ]زو هط[ 
عالأعه عومم 5اع/ما لأأكعنوع؟؛ عطةاءه1 مخول 


هنا شرح مختصر حول كيفية عمل المواقع الإلكترونية :عند إدخال عنوان الموقع في المتصفح الخاص بك أو النقر على رابطء؛ هناك الكثير من الاحداث 
تدور وراء الكواليس لتحصل على المعلومات التي تبحث عنها وكي يظهر الموقع امامك بشكله الكامل . 

عند عرض موقع على شبكة الإنترنت» متصفحك يحتاج أولا إلى العثور على ملقم ويب كي يتم تحميل المعلومات منه. فمن خلال ال 17215 يتم التحقق 
من اسم الموقع إذا كان موجود على الإنترنت ام لا في حالة تم العثور على العنوان وأنه موجود على شبكة الإنترنت. يقوم السرفر الذي يحوي الموقع 
وصفحات الموقع بإرسال البيانات وصفحات الإنترنت الخاصة بالموقع المطلوب إلى متصفحك سواء الصور والبيانات وغيرها . 
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11 1 11 


6125 !] رناك1:1 112 غدء !1" دعم 13 :ده] 205داه 1111311 


لغة وصف صفحات الويب 
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الباب الثانى .111111 


البداية مع .111111 


نبدأ في هذا الفصل مع أهم وأجمل وأبسط لغات صفحات الويب وهي لغة ال ,111173/11 
تعريف لغة ال 111211 : 

هي لغة لوصف صفحات الويب. 

هي لغة تقوم بترجمة صفحات الويب وعرضها على المتصفح. 


هي لغة ترميز تستخدم علامات الترميز. 


سنقوم سويا بتصميم اول صفحة ويب وأول موقع في هذه الدورة. والطريقة كالتالي: 


قم بإنشاء مجلد خاص على سطح المكتب وسميه بأي اسم وليكن (22317961) . نقوم بفتح المجلد الذي أنشأناه ثم نضغط بالزر الأيمن للفارة ثم نختار 


(جديد) ثم (مستند نص). 


كع للع ممم 


نضع اسم معين للمستند مثلا : (23111:5619©1) أو أي اسم. نقوم بفتح المستند ونكتب التالي: 
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علامع ‏ إل 

الها 

قاعدة بيانات ددعءءش 66ه5م1/112 [لها 
عا غمتعكممتعم مداع 20 |" العالا 
8غمم 0‏ (3ه] 1 الدالكد 
مع حمدءه0 لرولالاء#معم 1/11 [1ا ِ يدا دونه 
#معصصمنءه0 اأممسهل ‏ 2 جاع لع 
أ رع د60 +0501 1/11 عرض تقديعي من .ماع لكاه؟ علط ععتحرمعون6 
؟عاوتاطن8 506مع11/! مستند 21 2 
0 ا 00 
لاا 2 مجاه عممدمعم8 مومنا 

اعع»8 هوم ١/11‏ ورقة عمل [/2 
0 ا ٠‏ طاغانيا عمقطد 

عا ع«م مقم اا /© <١ ١‏ مزامنة العجلدات المشتركة ‏ [8 

| | معلا 


<لتتعط> 
<03مط> 


<041326>/21ه56 ج7125 1<117ط> 
<2/>. ط«طة2 3236م 2125 1< م > 


<تتق مط ل > 
<لص7عط > 


بعد الانتهاء من كتابة الأسطر السابق نصل إلى الخطوة الأهم وهي القيام بحفظ الملف ولكن طريقة الحفظ هنا مختلفة نوعا ما عن أي حفظ لأي ملف 
نضغط على (ملف) ثم ( حفظ باسم ). ستظهر الصورة التالية: 


+22 ععلاه؟ معلا > عمامقو0 


2 
0011م عقوم عمقلا ععطةوميوع 1 


4طاماء مر عدار بردم ل ممغاءء0 لا 
0 1-5 

5) عععوام جمعععم إخ 

عمانانوا5 2 


ععلموءطنا 9 
كمع صمنءه0 8 
أكناا/اا اله 
كعدا 1م إظآ 
دمع10/ | 
١‏ نئل كه - 
- +طماع عردم ا؟_لاحم ‏ بعومهم عاك 


١‏ :لطي كاده عه 9 كك © مر عه ع بدك 


(5#.*) كارع دصدءه0 عه 1 


كع لامع علل] > 


أسفل اسم الملف الذي أنشأناه مكتوب بالإنجليزية حفظ نوع الملف ك نضغط عليها ثم نختار (جميع الملفات) هنا الصورة باللغة الإنجليزية يمكنك تتبع 
الصورة والترجمة .ثم ننتقل إلى اسم الملف بدل ان كان الاسم ينتهي ب 626 نقوم باستبداله ب 12431 وسيصبح اسم الملف كالتالي: 


لمصغط.طع 131115 


بعد الحفظ سترى أن شكل الملف قد تغير وأصبح شكله كما في الصورة أو حسب المتصفح الذي تستخدمه: 


© > حك عام بمعلذا م8 > طاغانيا ع قاذ > بوموعطنا ماع نساعمآ > ععامقو:0 
#طبماء مغدم _لزصم ‏ « اممغطاءطع مر غوراة_بزحم © عع رميوع د 
انا 00 غك 1 مع دنع هم ااال عمممعرطة 
كعخرط 93 كعخرط 93 ودباصة. الال 
00/1635 عض 
ملعتت 13 


هنا تستطيع ان تبارك لنفسك لأنك أنشأت أول موقع وصفحة على الإنترنت قم بالضغط مرتين على الصفحة التي أنشأتها وسيقوم المتصفح بفتحها 
كصفحة إنترنت. كما في الشكل التالي: 


تلدع )115 31 


تاج هدكدم أدعة :117 
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يمكنك تغيير النص الظاهر على صفحة الويب من خلال الملف الذي أنشأته وتضع اسمك أو أي نص آخر بدلا عن 


5 111:5 117 أو طمه رع 1:2م )21:5 3219 جرب ذلك واحفظ الملف بعد التعديل . 


علامات ترميز 1285 .1111/11 
لغة ال,1117411 تعمل بواسطة علامات ترميز وتسمى ايضا ( 1285 ,111711) وتحوي هذه العلامات اوامر ال 18431 سواء امر لكتابة نص معين امر 
لإظهار صورة أمر لتعين حجم خط معين .. الخ. 


هناك نوعين من الترميزات لصفحة الويب ,111711 (ترميزات الهيكل - ترميزات المحتويات ).ترميزات الهيكل لابد أن تكون موجودة في أي صفحة 
ويب وإلا الصفحة لن تعمل لأنها تخبر المتصفح بأن الملف هو صفحة ويب . مثل ( <[صدغاط/><لصغط> وأيضا <007/> <6007> ). 


ترميزات المحتويات : وهذه الترميزات تعطي اوامر للسرفر أو المتصفح بعمل شيء معين إما نص او صورة او أي شيء آخر حسب برمجة المبرمج. 


صورة توضح هيكل صفحة الويب : 


<> 
< لوط أ 
<1تا/>وصالدعط ق ولطا<1طء» 
<دم/>.دامةوةدم 3 5] قألط1<م> 
<م/> .حام3:و33م ععداغمم3 ذا وأط1<م>. 


< لاله ط/> 


سنك 
الشكل الرئيسي لهذه العلامات أو ال و86 كالتالي: -١‏ بداية الامر ؟- نهاية الأمر وفي وسط علامة او أمر الترميز يكون المحتوى الذي سيتم تطبيق 
الأمر عليه. 
<128221216 >المحتوى <2522126) /> 
في الصورة السابقة هو شكل اوامر ال 1421 ونعني ب 135112116 أي اسم الأمر أو الترميز المطلوب تنفيذه. 
<051221116)> هنا يبدأ الامر أو وظيفة علامة الترميز التي نريدها ويسمى (26) )::ده)5). 
المحتوى الفراغ الموجود في وسط المثال السابق هو المحتوى الذي سنطبق عليه امر الترميز سواء كان نصا أو صورة أو غيره. 


<135112112/> هنا ينتهي أمر الترميز ويسمى ب (128 20©) ويشبه الأول لكن هنا أضفنا علامة سلاش / والتي تميز علامة الترميز في البداية عن 
النهاية. 


في المثال السابق استخدمنا علامة ترميز <110:1> بدأنا في بداية الملف الذي انشأناه وكتبنا هذا الرمز ويشترط لأي ملف او صفحة ويب في لغة 
11311]أن يبدأ بهذا الرمز وينتهي ب <[1:2/> 


2 . 3عمد دط/مهه . 58 | تعلم البرمجة | «ده . 20202 3ط- بعددك1 . لامها 


ايضا رأينا رمز <1007> وهذا رمز يشير إلى أحد أهم عناصر صفحة الويب ضمن هيكل ملف ال ,7117/11 ويحتوي بداخله جميع محتويات الموقع او 
الصفحة : 


فدمعاهل! - محامطاء بس غىر5_برم 1 
ماعط معألا غمصممع غللع عام 
<الغط> 
<لاله0ط> 


هنا محتوى الموقع 


رامال ]| 
ع 


لاط ر> ا 


ننتقل إلى ترميزات المحتوى للصفحة نأخذ أمثلة على ترميزات ال ,11173411 مثلا هذه الترميزات كلا منها يدل على امر معين : 
<7> هنا النص <7/> 


حرف ال2 الموجود داخل الترميز إختصار ل 1م 7293879 والتي تعني نص إذأ عندما نريد عمل نص داخل صفحة ويب نستخدم الترميز السابق يبدأ 
ب <7> وينتهي ب <7/> 


مثلا من اليسار : <7/> هذا كتاب خاص بالمواقع الالكترونية <م7> 

مثال آخر: <ع1ذ/> <218ز> 

ترمز كلمة 1126 إلى ©1026 وتعني صورة لذلك يستخدم هذا الترميز لعمل الصورة داخل صفحة الويب. 
سنأتي إلى عناصر ترميز كثيرة في ال ,711711 في الدروس الأتية . 


ملاحظة هامة: لا فرق في كتابة علامات ترميز لغة ال ,1177/11 سواء بالحروف الإنجليزية الصغير او الكبيرة كلاهما لا فرق بينهما . 
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محرر ال .111111 (015غ016»ء :1111311) 
نقصد بالمحرر هنا أي البرنامج الذي سوف نستخدمه لإنشاء صفحات الويب ولكتابة وبرمجة لغة ال ,71173411 والذي يساعدنا في برمجة صفحاتنا التي 
سنقوم بعملها وبرمجتها. 


في بداية تعلمنا لغة ال .1117/41 سنستخدم برنامج المفكرة أو ما تسمى ( 72047820 ) باللغة الانجليزية والموجودة في أي جهاز حاسوب ويمكن 
الوصول إليها عن طريق: 


إبدا - البرامج - البرامج الملحقة - المفكرة 5 


يمكننا من خلا المفكرة برمجة وإنشاء الملفات التي نريدها ويمكن الوصول للمفكرة كما في الصورة 


والشرح السابق . 


كامعجدعه0 

عع مسقعةم 

عتعناابا 

كعمد 

عنام جره 

اعمدم امناممع 

دتعغ م8 ممه ععءآبت 0 
كمهىوه:" #أناد 0 


غمممن5 ممه ماعن 


عع نمع الا 5م يه 
كءلمدمعءءم إل 


تعأعمهم1 عام طاممععن81 600 

منوانعاقء 9 

غمدممء8 مممصوحمهح 83 

ماع زه,8 عارومطعلاا د مأ ععمممه 9ه 

,ماع زمه دمأ عع ممه 8 

عمد ومتهءة إل 

امهم غناممآ طاوانا رقع 
مدمعغملةا 

عمندم |3 

ممتاعع ممم ممغاءء0 عتممء8 115 

دسم 137 

امه1 وماممتم5 © 

عل مععة لمنه5 رأ 

عنملا بواء58 :237 

يعامعن عمرو 9© 

عراوك وسسه وتلا 29 

بعامعع باناتطوال! دبمه مالا 94 

اظا 

دععءعه أه عودع [[ 

كامه1 معفسرك ل 

عمععامة1 إل 

اكع مهم وبمولم الا لل 
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عناوين ال .111/11 ( د128لدع11 :1111311) 


سنتعلم في هذا الدرس كيذ كيفية إنشاء عناوين في صفحة الويب وهي انواع منها ما هو أكبر حجما ومنها ما هو أصغر بقليل ومنها ما هو أصغر أيضا. 


علامة ترميز العناوين في ال 1411 بسيطة جدا ولها رمز محدد وهو <11/> <11> وحرف ال 8 يرمز لكلمة ع8ؤ18»203 والتي تعني عنوان .اما 
الرقم ١‏ فيمكن تغييره إلى رقم 5 وهو حجم الخط, 


مثال: 


أكتب الكود أو البرمجة التالية في ملف .1117/1 


انعناضا حي يي ب لمعملا - امغططعس: سيرم 1 


ماعن بمعالا سب ختلاع عاط 
<اسغط> 
<لاله0ط> 


حتط ر>عم» | عللاح1ط> 
< 2ط ر>عنوم» | علنا<2ط> 


<3ط ر>عدم» | علناح<تط> 


2 لطأ 
د 


بعد كتابة الكود والبرمجة السابقة ستظهر النتيجة التالية: 


١ 


0 


عسسرمعاء117 


لاحظ النتيجة في الكود السابق وضعنا ثلاثة عناوين وجعلنا أرقامها مختلفة كما تلاحظ النتيجة النص الأكبر هو عنوان رقم واحد. والأصغر هو رقم ثلاثة. 


فقرات ال .1113/11 (عطصدعدد< .11311]) 


فقرات لغة ال ,1117311 . كيف نقوم بعمل فقرات أو نص داخل صفحة الويب ؟ هنا في لغة ال 7117/11 طريقة سهلة وكلما مررت على الدروس التالية 
ستجدها مكررة في طريقة ة عمل الترميزات والبرمجة مع تغيير فقط مسميات الترميزات . 


نقوم بإنشاء فقرات أو نصوص من خلال الوسم أو الترميز أو الكود <5/> <17> ويرمز حرف ال 72 إلى طم8:ع222 والتي تعني نص او فقرة 
.في المثال التالي سنقوم بعمل فقرة معينة داخل صفحة الويب وعنوان أيضا كما أخذناه في الدرس السابق وسنطبقهما معاء قم بكتابة الكود التالي: 
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00س مسد 


ماعنا معنا ممم جام عا 

<الغط> 

<لالهط> 

حتط/> ع5"لامء ا1للكلا 0ع عترم اع حتط>| 
<م> 

5]| "لاه 2120,ر ع5"الامء 1111ل 20 علرق [ عر 


<م ر> 


ياي 
< اماعط > 


بعد كتابة وبرمجة الكود السابق وكتابة العبارات السابقة سترى النتيجة كتالي : 


001115 1111 0غ عدرمعاءى 


5 كنات قلة, عدكتامء .1111/11 ه؛ عتسمعاء 1 


يمكن عمل عدة نصوص في آن واحد أيضا لتكون فقرات منفصلة عن بعضها وليس كتلة واحدة وذلك بتكرار ترميز الكود الخاص 
بالنصوص أو الفقرات. 


روابيط ال .1111/11 (ككلطاءآ 1118311) 
لا يوجد صفحة على الإنترنت إلا وتجد كلمة أو زر عن الضغط عليه تنتقل بالضغط عليه إلى صفحة آخرى أو تجد جملة ك( اضغط هنا ) . وعند الضغط 
عليها تتوجه إلى مكان آخر أو صفحة أخرى هذه كلها تسمى روابط او 111715 . 


في هذا الدرس سنقوم بعمل رابط أو لينك يوجهنا إلى أي موقع آخر ونستخدم الترميز <2<>7/2> لعمل الرابط لنقم بكتابة الكود التالي وسنجرب 


في هذا المثال الكتابة باللغة العربية تابع: 


<3/ر> إضغط هنا للذهاب إلى جوجل  ©»011'<‏ ©1[ 0000 . الاللاالا/ / : مغغط "دأعصط > 


سه م 
<الغخط > 


لاحظ الترميز والكود في الصورة قمنا بعمل رابط إلى موقع جوجل قمنا بكتابة 27> وهي ترميز الرابط لكن قبل إغلاق الرابط لدينا جملة مهمه وهي 


""-2ع:1[ هذه الجملة تحدد مكان الذهاب بعد الضغط على الرابط وهي ثابته لا تتغير ونضع ما بين علامتي التنصيص رابط أي موقع كما وضعنا موقع 
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جوجل في المثال يمكنك عمل أي موقع آخر .أو حتى يمكنك عمل ربط لصفحة أخرى داخل الموقع نفسه سنأتي لها لاحقا . قم بتجربة الملف وتشغيله 
وانظر الى النتيجة واضغط على الجملة طبعا ستظهر كما في الشكل التالي : (انظر الملاحظة اسفل قبل تشغيل الملف) 


ملاحظة : في الغالب لا تعمل اللغة العربية بشكل صحيح لذلك لابد من عمل الخطوة التالية كيف يقوم السرفر باعتماد اللغة العربية من خلال : 


اضغط على ملف - حفظ باسم - اسف النوع هنا خيارات اختار 11668 بدلا عن 47151 كما في الصورة التالية : 


كشعيو5 71 
بيع ركم 00000 عم ١‏ خاص بالأضلة » إلى ]ا 
| © ٠ع‏ دة ععلاه سعلة ‏ + ععتمهوب0 ا 
2 --_- ا ْ 
عم لمعا ,لمم عغهم عمدلا حك رميوع جلو | 
06 جم #اباءم إرل/ة./717 خطماء مر عور ريرم ل ممغاىء0 11 
كمدماميه0 إل 
2] عععدام ؛معمعم 22 
هروك 25 
كعموءطنا 9 
كامع صمبءه0 3 
عأعنااا الى 
كعنم إك 
دمع10/ [قل 
0 1 5 - 
2 امخطاطء سرغعور,_برص ‏ بعمهم عاك 
|- (ط.*) كتمع صمدءه0 2ن1 | مر ده عبود 
أكلالش 


علمءاملا 
موالمع وتط علمءزمنا. 


ثم قم بالحفظ واذا ظهرت رسالة اضغط نعم . 
بعد ان عدلنا نظام التعرف على اللغة العربية نقوم بتشغيل الملف الذي قمنا بالعمل عليه سنجده ظهر بالشكل التالي: 


1لا ماع /ح_خ15]_/١1]‏ جاع /ثا/ا/كناب2096ودورة2096 المو| أقع/خاص2096بالأمثلة/مم !دع 0/أع دده بإ/دمع ونال /إل/زعا؟ زكلاات 


إاضغط هنا للذهاب إلى جوجل 


نلاحظ عند الضغط على الزر يفتح لنا في نفس الصفحة موقع جوجل , لو أردنا ان يقوم المتصفح بفتح الموقع في صفحة أخرى هل هناك طريقة لعمل 
ذلك ؟ 
نعم .هناك خاصية نقوم بإضافتها إلى تاق أو كود أو ترميز اللينك وهي خاصية (4ع6ع:2)) ومعناها هدف . نقوم بإضافة الخاصية السابقة مثل خاصية 


الرابط ومعها علامتي تنصيص كما في المثال التالي : 


ها 1س 0 


ماعط بعالا غدصممع غللع عام 
<اسغط> 
<لالهط> 


<ة/> إضغط هنا <''عا2ة ا ط_ "+006 2 01م» ‏ 00001 اللبالما/ / : مغخغط"دعصط > 


00 /ر> 
<اشغخطل> 
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لاحظ أضفنا خاصية " "'-)6عع12ج) وضعنا ما بين علامتي التنصيص القيمة [57192_ والتي تعني فتح صفحة فارغة. جرب المثال بنفسك واضغط 
على الرابط وانظر هل فتحت لك صفحة أخرى أم لا . كيف أقوم بعمل ربط لصفحة داخل موقعي نفسه او داخل مجلد موقعي ؟ مثلا أريد أن اضع زر أو 
رابط اسمه اتصل بنا فهل يمكننا ذلك ؟ نعم تستطيع عمل ذلك فقط قم بعمل التالي : 


انشئ صفحة ويب سمها بالاسم 00242014 . ضع فقرة أو نص معين حول الاتصال بك عنوانك وبريدك الالكتروني .ضعها بجانب الصفحة التي تطبق 
عليها. 


بعد عمل صفحة أخرى لجانب الصفحة التي نقوم بالتطبيق عليها نعود إلى صفحة التطبيق لنضيف رابط لفتح الصفحة الأخرى. نقوم بعمل الرابط 
كالتالي: 


لدمعاملة - امغططع بس ىم بردم 21 
ماعط بعالا غوصمرمع #لاع علم 
<اسغخط> 
<لاله0ط> 


حة/> إضغط هنا <'' 1111 دلا ©0036 "عمط 23> 


4 لسار 
< امعط > 


بعد عمل الرابط كما في الصورة قم بفتح الصفحة واضغط على الرابط على تم نقلك للصفحة الأخرى ؟ نعم سيتم نقلك للصفحة الأخرى التي أنشأتها. 


التعامل مع الصور ال .1111/11 (5ع12128 .1111/11) 


المواقع الإلكترونية دون ضور إياأتعون اجِلللنة [الجذابة لل إن أأكثر المواقع جلدال اتير ليود الصور والخلفيات الرائعة » هنا سنتعلم كيفية إضافة 
صورة لصفحة الويب . 


لإضافة صورة في لغة ال ,18117311 نستخدم ترميز معين وهو <ع101> كما في المثال التالي لدينا صورة اسمها 16م1دام سنقوم بإضافتها إلى صفحتنا 
التي نطبق فيها .قم بإدراج أي صورة في المجلد الذي تعمل 


اه مسموهسده ا0 لدمعذهل! - امخططء سر غىة_برمم أ 


عليه و قم بتسمية الصورة ب)زمادام ثم قم بكتابة الكود 0 مإعنا سعلنا +وصممع مع عاك 
1 : <اشغط> 
التالي: <لالهمط> 


< "11306 مع 31-013 0م[ غ11مآلام "دع" 5 10> 


> ا سوه‎ ١ 
> لاحظ الكود المكتوب : <الغخط‎ 


<111185> وهذا ترميز خاص بالصور لاحظ أنه لا يوجد 


ترميز يقوم بإغلاق الكود كما كنا نعمل مسبقا. 


" ''جحمزك هذه الخاصية تق م بإخبار المتصفح او السرفر عن مكان الصورة واسمها ونقوم بكتابة اسم الصورة ما بين علامتي التنصيص شاهد المثال 


.لاحظ اسم الصورة ع م[ز.)ذم1نام 


اضفنا نوع الصورة وهو عمؤ. وهي مهمه جدا كون الصور أنواع فمنها 17ع. ومنها عدرم. وانواع أخرى ومن عملوا على برامج معالجة الصور 
يعرفون ذلك . 
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" '"-216 هذه الخاصية تقوم بوصف الصورة في حالة لم تظهر الصورة لأي مشكلة ما يظهر الوصف المكتوب ما بين علامتي التنصيص . 
قم بتجربة المثال السابق . هل تريد إضافة نص إلى الصورة او شرح مبسط ؟ 
استعن بما أخذناه مسبقا من علامات الترميز لتضيف وصف للصورة وليكن بعد الصورة انظر المثال التالي وسنتعلم منه خصائص جديدة : 


صررررووو79للا 1 121414551 اماما شتا 
ملعذ] - بيعاا +مصمم] - 616 جع او 

<الغط> 

<لاله0ط> 


< "2-200 طوتعط "028-400 1ن "22306 ع 13لز"-1 23 وم 11م انام"جمم 5 طلا 
<عط> 


<م/> .. هذه صورة رأئعة وهي جبال تقع في هولندا <م> 


<لالمطلر> 
1 2/1 


خصائص جديدة أضفناها لنتعرف عليها معا : 
'"' ''-175710 هذه خاصية مقاس العرض للصورة ونضع الرقم الذي نريده وسط علامتي التنصيص. 
'" '-116111 هذه خاصية مقاس الطول للصورة ونضع الرقم الذي نريده وسط علامتي التنصيص. 


ايضا هنا ترميز جديد أعتقد أنه هو ما كنت تبحث عنه وستحتاجه وهو <11> وهو ترميز يستخدم للنزول سطر واحد بعد اي ترميز لاحظ ماذا كانت 


5 


النتيجة : 


: د رائعة آل تقمذ لندا 
هذه صورة رالعة وهي جبال لمع في هولندا 


2 . زعم دط/مهه . 158 | تعلم البرمجة | «تهن . 20202 3ط- بعددك1 . لامها 


رأس ال .111811 (لدعط :11311 


يعتبر رأس الصفحة المبرمجة من أهم الأجزاء للموقع ففيها يتم وضع عنوان الصفحة أو اسم الموقع أو تفاصيل الصفحة التي زرتها قد يكون خبر أو 
البوم صور أو غيرها. وأيضا يحوي وصف للموقع والصفحة التي تمت زيارتها. 


أيضا في رأس صفحة ال 1611 يمكن وضع أشياء أخرى هامة سنتعلمها في الدروس القادمة مثل : 


خصائص الاستايل الخاصة بالموقع (»5601 255) أو رابط لملف 0255 أو '50011121 14574[ سنتعلم كل ذلك لاحقا سنجرب الان بعض محتوى رأي 
الصفحة لاحظ الكود التالي : 


لدمعذهل! - مطم طعي ىلم 1 
ماعط مهالا #مصممع عتلع علع 


<اضغط> 
<لدعط> 


<©313+1+/> هنا عنوان الموقع او الصفحة <©38601[6غ> 


<"هنا وصف الموقع أو الصفحة''-1 012612 *' 7012م تصن دوعلل '"-22106 هغأع1 


<ل دعط/ل> 


<لالهط> 


لاحظ في المثال السابق وضعنا كود الرأس <1620> وأغلقناه في الاسفل <0620/> هذا رأس الموقع. ننتقل لمحتواه وضعنا عنوان للموقع والذي 
ويرمز له بالكود أو الوسم <1016)> وأغلقناه بال <016)/> ووضعنا في داخله عنوان معين سواء كان اسم الموقع أو عنوان الصفحة المراد تصفحها . 


ايضا أضفنا كود ال <721648> وهذا الكود من اهم مكونات المواقع فهي مهمة للمتصفح ومحركات البحث مثل جوجل وغيره وعلى حسب نوعها هنا في 
المثال تم وضع ال 73662 لوصف محتوى الموقع وهو مهم لمحركات البحث تحتفظ او أرشفة الوصف لديها لحين البحث عن نفس الكلمات المدرجة في 
الوصف للموقع. جرب وشغل الصفحة كالمثال السابق ماذا تلاحظ في علامة تبويب المتصفح ؟ هل ظهر العنوان ام لا ؟ 
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تفسيق خص ال .1111/11 (عط تا همتتره؟ 11811) 
هناك اكواد خاصة لتنسيق النصوص داخل صفحات الويب مثل تفخيم النص او النص المائل أو النص العادي. ومن خلال المثال التالي سيتبين لك بعض 
خصائص تنسيق النصوص. 


وسم او كود <1> وهو اختصار لكلمة 7010 أي تفخيم النص . 
وسم أو كود <1> وهو اختصار لكلمة عذ[ج)1 أي نص مائل. 


مثال: 


كك ككم لممعاها! - امتاططع سعهر5_رصم | 


بسح 0 
<لدع ا > 
<لاله0ط> 
<ط/>موقع رواد التكتولوجيا< > 


<1/ر>موقع رواد التكتولوجيا< 73> 


<لالص0طلر> 
<601/> 


في الكود السابق أضفنا كود <17> وكتبنا نص معين وثم أغلقنا الكود في حالة لم يتم إعلاق الكود ستكون كل نصوص الصفحة مفخمة. كما قمنا بإضافة 
كود او وسم <1> كما في الكود السابق وهي للنص المائل . قم بكتابة الكود السابق وستلاحظ النتيجة التالية كما الصورة : 
1117 .. دعن سورست ةر 
مس096 2بالأمثلة /حم ادع اع دده داع 5نا/:///: 511 | | 0 >« 


موقع رواد التكنولوجيا موقع رءاد التكنولوجيا 


لاحظ النص العريض والنص المائل يمكنك وضع كل جملة في سطر ضع كود السطر كما تعلمناه مسبقا. تمارين حول خصائص النص قم بتطبيق الأكواد 
التالية في الجدول التالي ولاحظ ماهي وظيفة كل كود او وسم : 
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5 ]| 10اا3 مطامط غألاء 1 “11٠‏ 1 مآ 


0 أماءعكع 0 120 

خباعغ 0امط ودع مقع <طع> 

غلاعغع 35120 1اصداع وع مقعم 2211 

77000 1ه ععزمن/ا ع3 تجرمعغ !3 ناق ما غلاعغ )0 غ روم 3 5ع ممع 0 
ألاعع ع ||3تزة5 دع داقع <51311> 

عألاعع ألردع نه متا وع مقعم 02نم 50> 

لاع نلعم لءوطاناد 5ع ع0 <طناقع 

عألاعع لمعم تع5واء صلاة 005 < ملاع 

عألاعع لعغع وما 01025 <105> 

لامع لعغععاع0 دع مقع داع0> 

غأ»اعع معطلاو [اطواط/رلع513:1 وع دقعم <ع0131> 


خصائص الخطوط فى ال .1111/11 (6)<م] .11113/11) 

توسعت طرق تنسيق الخطوط لكن هي نفسها الأكواد مع اختلاف بسيط أحيانا حتى في نفس الخاصية هنا سنضيف خط إلى صفحتنا التي نطبق عليها 
ونضع خط مميز عن الخطوط التي أنشأناها مسبقا. وسنستخدم هنا الكود أو الوسم <1024<>/]04> 

لاحظ المثال التالي: 


<اشضغطء> 
<لدعط>» 


<3+16+/> ها عنوان الموقع او الصفحة ‏ <© 01 18> 


<"'هنا وصف الموقع أو الصفحة'' 16 ©0002 *" م0 3م 3ع5عل ''  22116-‏ 62> 


<خ0آ /رعرواد التكنولوجيا< '' [ا+م "2م 03 "5126-12 "مم غامعمء ”2-مو 2173 "لهم "دموامه "غطو زع "دمو 211 "مهمه تعلز 5عم 11 "'حمء2؟ غمه>»ه 


و 
ها سجدابد 


بعد ملاحظتك للكود السابق والجديد سترى كود كبير لكنه بسيط جدا وسنسرد هنا كل شي في الكود الجديد وسنبدأ من البداية: 
أضفنا كود <406>.وهنا إشارة للمتصفح او السرفر بأن لدينا هنا خط له خصائص. 


بعد أن أضفنا كود الخط نقوم بإضافة الخصائص للخط وبدأنا بعمل خاصية ال »420 وتعني نوع الخط ووضعنا ما بين الحاصرتين اسم الخط الذي نريده 
وهو الخط الشهير 120112812 721615 7131265.والموجود طبعا في برنامج الورد والاكسل وغيره. 
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ملاحظة : (ليس كل الخطوط موجودة في السرفر لذلك يستخدم بعض الخطوط الموجودة في المتصفحات او السرفرات المعروفة او إضافة خط مميز 
للموقع). 


أضفنا خاصية :0010 وتعني اللون ووضعنا ما بين الحاصرتين اسم اللون وهو 760 ويعني أحمر يمكنك عمل لون باسمه غير الاحمر مثل 1267م 
جرب ذلك كما انه يوجد اكواد خاصة بالألوان بدلا عن الأسماء مثل 223 ضع هذا الرمز بدلا من الاسم ولاحظ.(سنتعلمها لاحقا). 


أضفنا خاصية «رع1[ج وتعني مكان الخط هل على اليمين او اليسار او الوسط هنا اخترنا :»064 وتعني توسيط الخط جرب كلمة 1/6 وكلمة 116ع11. 
أضفنا خاصية -ؤ0 وتعني «6]10ؤ وهو اتجاه النص وهنا خاصية مهمه جدا سترافقك كثيرا في عالم المواقع وكما تعلم أن اللغة العربية اتجاهها من 
اليمين إلى ايسار في المثال طبقنا هذه الخاصية وهي 161 وتعني 1016 40 1:6ع3: من اليمين إلى اليسار وهناك الخاصية الأخرى الخاصة باللغة الإنجليزية 
1 أي من اليسار لليمين عكس الأولى. 


أغلقنا بادئة الكود التابعة للخط ثم وضعنا النص وأغلقنا النهاية للخط ب <6016/>.جرب المثال السابق ولاحظ النتيجة: 


رواد التكنولوجيا 
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الجداول فى ال .111811 (12125 .1111311) 
تعتبر الجداول من اهم محتويات لغة ال ,1112311 وتستخدم بكثرة في المواقع والنشرات الالكترونية رغم وجود بديل جديد لكن مازال من يستخدمها 
إلى الان. ويرمز له بالكود <18116> 


الجدول او ال 12116 ,75117311 وظيفته الرائعة التي يقوم بها هي ترتيب محتوى الموقع سواء العناوين والنصوص والصور وغيرها ترتيب دقيق جدا 
»ويتكون الجدول من التالي: ( أعمده - صفوف - خلايا ). 


والهيكل العام للجدول كالتالي: 


الصف الاول الخلية رقم 2)|الصف الأول الخليه رقم 1 


الصف التاني خليه رقم 1 


والكود المستخدم كالتالي: 


لممعامل! - امغططء سمه ررم | 
ملع مهالا #قصممع غتاع عاع 


<1'"جترعلترمط عاطة)> 
اك 
<0)/>الصف الاول الخلية رقم >60<١‏ <60/>الصف الأول الخليه رقم >)0<١‏ 


حممل> 
جوم 
<0/>الصف الثاني الخلية رقم ؟١<60>‏ <0/>الصف الثاني خليه رقم >60<١‏ 


حال 
<عاطة)/> 


شرح الكود: في البداية قمنا بعمل جدول بإضافة كود <42116> لاحظ وضعنا خاصية للجدول وهي إظهار حواف الجدول 1010061 بمقدار ١‏ بكسل جرب 
وضعها صفر لاحقا وقارن. تم إضافة صف <7)> ثم تم إضافة خليه داخل الصف بالكود <0)> هنا يحق لنا وضع المحتوى الذي نريد ثم نغلق الخلية 
يمكننا عمل خلايا كثيرة كالسابق ثم في الاخير نغلق الصف الاول بالكود <60/> الصف الثاني بنفس طريقة الاول في الاخير نقوم بإغلاق الجدول 
<49316/> بعد الاستكفاء بالصفوف. لاحظ الخلايا التي الصف الأول حين تنطبق مع الخلايا مع الصف الثاني نصفها بالعمود. 
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القوائم في ال .1111/11 (ئأائذآ 11113/1[1). 


معناها بالعربية قائمة او لائحة وتستخدم لعدة اشياء والاهم للعناصر المسرودة ضمن فنات مثلا: خضروات (جزر- خس - طماطم ) 
فواكه ( تفاح - برتقال - عنب ).يمكن التعبير عنها من خلال القوائم في ال11 بواسطة القوائم (115)5). 
لدينا نوعين من القوائم وهي: 


النوع الأول : القائمة الغير مرتبة ( 1.154[ 11201016160 ) وتكتب في لغة ال11)ط بهذه 


الطريقة كما فى ١‏ ة المقابلة : 
احريةه كداتي الصور ع 
لماعم #مصممع تمع عام 
لاحظ استخدمنا كود <11> وهي ترمز للقائمة الغير مرتبة او غير مرقمة فتحناها بعد اسم || * جمدت 
ب-ااك 
خضروات ونكتب بعدها كود العناصر وكل عنصر يفتح ويغلق بالكود الخاص به وهو <زا/>جزر <ز> 
<ز/>خس-< > 
<11> مثل عنصر <1[>جزر</1[>. لعصب م 
إلا 


جرب عمل كود القوائم وانظر الى نتيجته في موقعك. 


النوع الثاني : القائمة المرتبة ( 1.156 001610 ) وتكتب في لغة ال7[1مغط بنفس طريقة القائمة الغير مرتبه مع اختلاف بسيط في الكود.كما في 
الصورة المقابلة أيضا: 


ما الفرق بين الكود الاول والثاني للقوائم ؟ جرب الكودين وانظر ايهما المرتب والغير كط حاركض 


ماع مهالا غمصممع غللع عع 


مرثتب. : خضروات 
<[0> 

8 1 5 7 7 5 <ز/>جزر <> 

سنستخدم القوائم فيما بعد في لغة ال 16011 مع ال 095) باحترافية وصنع قائمة رئيسية <[/>خس-<]1> 
2 <1/>طماطم <> 

للمواقع بشكل أنيق واكثر فائدة. <اه/> 
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تطبيق عام حول ال .1113/11 
( 121151125 لتتتغط 101 1162101رزمة لوناعمء0© ) 


سنقوم بتطبيق تطبيق عام حول ما أخذناه في لغة ال.7117311 ومن خلال هذه التطبيق سننشأ موقع مصغر بواسطة هذه اللغة الرائعة ونضيف بعض 
الأوامر البسيطة والمفيدة وسيكون التطبيق كما في الشكل التالي: 


صورة لرأس الموقع العرض )20٠١(‏ والطول ٠٠١(‏ بكسل) 
الرئيسية أعمالنا من نحن صور “تصل بنا 
صورة )١5١*56(‏ نص عادي 

صورة )١5١*5.60(‏ نص عادي 

صورة )١5١*5.6(‏ نص عادي 

صورة )١5١*76(‏ نص عادي 

حقوق الموقع 
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4 | اك الك لبية 


بالنظر للشكل السابق والمطلوب سنقوم بعمل جدول يحوي الموقع كاملا ويضبط لنا محتوياته » ويحتوي الجدول على ؛ صفوف الصف الأول لديه خليه 
واحدة فقط والصف الثاني كذلك كما تلاحظون في الشكل وآخر صف كذلك. 


الصفوف الباقية مكونة من خليتين او عودين الاول على الايمن للصور والثاني على الأيسر للنص. في الصف الاول في الخلية الوحيدة سنصمم صورة 
ونضعها في الخلية في رأس الجدول بنفس المقاسات المطلوبة وننوه على أن شكل الموقع العام يعتمد على فن التصميم وجماله وليس حرفية الأكواد 
والبرمجة فقط. 


في الصف الثاني من الجدول نقوم بعمل عناصر القائمة كروابط عند الضغط عليها يتم الذهاب لصفحة أخرى وهي (الرئيسية - أعمالنا - حول الموقع .. 
إلخ ).طبعا الصفحات حاليا غير موجودة ولكن بعد الانتهاء من الصفحة الرئيسية إلى آخرها نقوم بتسمية الصفحات الأخرى في الروابط مثلا: عنصر 
القائمة أعمالنا سنضع صفحة اسمها [1دغط.701:125_-دن0 في رابط الزر أعمالنا. 


بعد الانتهاء من تسمية الروابط والصفحات الأخرى نواصل إدخال المحتويات ففي الصف الثالث في الخلية اليمنى نضع صورة حسب المقاس المطلوب 
وهو إما أن الصورة نفسها تكون بنفس المقاس او نضع صورة بأي مقاس ونضبط مقاسها في الكود الخاص بالصورة وانا افضل الأول حتى لا تثقل 
الصفحة بأحجام الصور. 

في الخلية اليسرى نقوم بعمل نص ونضع الاعدادات الخاصة بالنص حسب رؤيتنا. نطبق الخطوتين السابقتين على بقية الصفوف. الخطوة الأخيرة 
الصف الأخير نضع فيه نص عادي بالحقوق والملكية للموقع ايضا رابط للشخص او الشركة المصممة للموقع. 
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نبدأ بالتطبيق وعمل الكود اللازم: 


نقوم بفتح برنامج الفوتوشوب بداية كما في الصورة ونعمل ملف جديد بالمقاسات العرض )٠٠١(‏ والطول ٠٠١(‏ بكسل) كما في الصورة التالية: 


دأرها اله !1 عدمدوقامصت 17 عطلهظامة 57 


0 سنا 


[--- ممت فدهطامات مقعم 


( مسعوعم ع9 ] 


واعهام :فالالا 

واعزم تنا 
عم إعا معام ممباممعم 

غط 8 + عمامه 68م :ع1160 ,مامت 


مطل( :مومه لونم ومدق 
0ه اه 


061966-1ع1 5568 :568 ومناءهلل :0516م عمام 


واعام ع دروك :مقهم ععمعم اعذم 


نقوم بعمل اللازم في الصورة التي ستكون رأسية الموقع وهنا ملاحظات او تنبيهات عندما قمنا بعمل هذه الصورة كرأس للموقع ماهي الا فكرة من أفكار 
كثيرة فمثلا هناك مصممين للموقع يفضلون عمل خلفية لرأس الموقع صورة واحدة والشعار مع الاسم صورة الأخرى وهو الأفضل ايضا . 


بالإمكان عمل الخلفية لون معين في الصف للجدول الخاص بالموقع افضل من الصورة ليخفف حجم الموقع. أيضا لا يشترط بأن يصمم الصورة لرأس 
الموقع مصمم الموقع نفسه أو المبرمج يفضل أن يصممها شخص له حس فني وتصميم مميز .فإن توفرت هذه الصفة في مبرمج الموقع سيكون أفضل 
وأوفر للوقت. 


بعد فتح برنامج الفوتوشوب سأقوم بعمل ترويسة للموقع بسيطة كمثال للتطبيق والناتج كما في الصورة التالية: 
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م3 5 #يرها عودم1 تلع 


كأهتاممت 00 هدمد 1 انوك 2 15506 جممدد مانم 


*: (868/8 مقآمع 301 10056 © فكمجعممعير 


عم / ( 


دورة تصميم المواقع 


ذا تديال 


2 
57 
مهمع" ركل 


00 فيا 
- 
كعكةناهه ا6اكع0 كع17ك8ع/لا "11 
ا 
1 سيره "11 
ترنه مواد 
3 
عوهم8 تحتفو 


نقوم بإنشاء مجلد خاص بالتطبيق الخاص بال ,7117311 ونسميه ,1117311 ثم نقوم بعمل مجلد آخر ليحوي الصور التي سنستخدمها للتطبيق نسمي 
المجلد باي اسم مثلا وع2ؤ كما في الصورة: 


2 « كتاب ودورة المواقع‎ ٠ خاص بالأمثلة‎ ١ 1110 ٠ 


فاه علط ص8 سمطوع9تاك > طاتسعيهم5 > بومطتامزعلساعمة ‏ > عتتمهورة 


عع رميوع كو 
ممناىء0 1911 
كوقماميه0 إل 
كععواه أمععع 8 إأ 
59 عبف0واذ 25 

كء6دءطنا 29 
دممم نك 
عثمعصيءه0 3] 
ناا اكى 


كعسقزم ك1 
سدع 8ه 


قمنا إلى الان بعمل الصورة الخاصة برأس الموقع نقوم الآن بإنشاء صفحة الموقع والتي سنسميها 106©:.1:2[1 ونبدأ بعمل الكود كالتالي: 


الجزء الأول من الكود: 


<"050 . 1310231 2111-1315 312 / 1212 / 11ت تع /11 / و02 . 7676.113 / / : باع ط" "111 / 12515102317 0. 1 :7111111 21:5 / /113/ /-" 281:1 لسعط 2002288 !؛ > 1 
<"لمتتخطعد / 1999 / 2ه . 13. ممما / / : بط" 25 تمعد لسغط> 2 

<0هعط> 3 

</ "2-8 تع 25 قطه :26701 رععرعح "5-2 2ع ط رمه "0025625-1156"-00117 2562-6 85د 4 
<1516ع/> 5-5012 | موقع دورة المواقع الإنكتروتية<812512+>]) ا 

<0دعط/> | إن 

5 

<" #7111587 "-2 و 1معوط تاقمط> 8 

<"”1عع"-3132 "4876600"-102وجعع23وط "2-2"1ع لوط "عمج رمن "2-7و211 "800"تطع10 م18طوع > 9 
10 

<عح> | الاك 

3# >20< 

</ "3290. م«ع20ع2/ردوسة "ع2 5د وصندة > ل عاك" 

"0 0 > / 20< 

ةف 15 

16 

<2<>20ح > ل إياه 

<ط/> <ة/><25ه20 /> الرئيسية<"4289900">-102مه 26م20><" "د2عطط 32> <ط> 0 1.0» 


: مقطتع : مرقطدطة : مورقططغ : ورقطصع 


<ط/> <ة/><عهمع /><"4759900"-102هت 25ه2> أعمائنا<"47559900"-102مته عصمعع<" "دروعط و> <حط> 
: مقطدة : مرقطدة : وقطدة : وروطدع 


<ط/> <ة/><2025 />من تحن<"4889900"-102مه نارمع ><" "د2قطط > <ط> 
: وقطدع : مرقطدعة : ومقطدة : مروطدع 


<ط/> حة/><2<5هخ />صور<"4889900"-102مه ممع ><" "د2قطط 83> <ط> 
: مقطتع : مرقطدع : مرقطدة : مرقطدع» 
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الجزء الثاني من الكود: 


<ط/> <202825<>/3 />حول المؤسسة<"4289900"-102مت خعمضموع ><" "عط > <ط> 
: مقطتاع : مرقطدة : ورقطدع : وروطصع 


<ط/> <ة/><25هغ2 /> اتصل يتنتا<"#889900"-102مت عصمع ><" "د2عغطط > <ط>» 


<قء /><عء / > 
<مع > 


>20< 


<ع1طوع > 

<عع > 

حجلع> 

</ "2"130ج طوزاعط "250">-171065 "350. 7 رومع «"52 ونة> 
حلع /> 


<20> 
جزيرة سقطرى - اليمن 
</ عط>» 
سقطرى وتكتب أيضا صقطراء أو سقطرة أو صوقطرةء هي 
أرخبيل يمتي مكون من أريع جزر على المحيط الهتدي قبيالة 
صواحل القرن الأقريقي 350كم جنوب شيه الجزيرة 
العريية[1]. إن اتعزال الجزيرة انطويل عن أقريقيا وشبه الجزيرة انعربية قد خَلّف مستوى قريد 
٠(وغير‏ مأنوق من الاستيطان الحيوي على الجزيرةء وكذلك قي المستوى الاجتماعي لسكان الجزيرة[2 


حلء /> 
<عع /> 


<عع > 
<2<0> 


الجزء الثالث من الكود: 


تتا 
</ "130">< تطوزاعط "250">-5ع710 "ومز. 211 /رد تعد" 3522 ونة> 
حلء / > 


<لع> 
السكان 
</ ع«ط> 
يلغ عدد سكان جزيرة سقطرى وققأ لتتائج 
لتعداد السكاتي نلعام 1994م حوالي 
تسمة ويلع 135020 عام 5[.2004]. وكانت جزيرة (65.514) 
سقطرى عاصمة للسلطتة المهريةه إلى عام 1967 حيث سقطت ييد اقراد من الجيهه القوميه القادمه 
من اليمن واتضمت إلى اليمن الجتويي 
ثم إلى اليمن الموحدء الجيتات 
1 5 التي تم اخدها من جزيرة سقطرى هي جيتات 
عريية تقية نم تتأثر يأي عوامل خارجيه والسقطريون هم من قبائل سائده اي ان الجيتات هي جيتات عريية تقية سائده 
وئيست قرع .وها ان دل على شي قأته يدل على 
اتهم حاقظوا على تسيهم العريي التقي.قبيلة 
المهره وقبيلة جهيته وقبيلة الجهضمي 
.وقبائل الساده وقييلة مذدحج وقبيلة كتدة وقيائل الممانك اليمتيه القديمه وعلى رأسهم قبيلة حميّر هم سكان سقطرى الأوائل 


حلء /> 
وتوت 


<2ع > 
<20> 


صورة 
<قع /> 


>20< 


الجزء الرابع من الكود: 
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<20> | كك 
تص زفت 
<< / > | ايك 
<عع /> 592 
93 

<عع > 94 
<20> 95 
صورة | كت 
١| > / <<‏ إيان 
98 

<20> 99 
تص 00 
<0ح / > 1 الاو 
<عاح / > | بيه 
03 


حل >»<عع> 
<عء />حقح / > 
<ع1طقء /> 


حلع / > 

<ء /> 

<2ع /><2013>/20 2190255لادهم 662"<126 2م "25و 311 22<>50> 
<ع1طقع / > 


<01ه0ط/ > 


< معط > 


بعد كتابة الكود السابق سيكون الموقع بالشكل التالي: 


دورة تصميم الموا 
-04: 6 255117 51155 


1 


جزيرة سقطرى ‏ اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هي أرخبيل يمني مكون من أربع جزر على المحيط 
الهندي قبالة سواحل القرن الأفريقي 330كم جنوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن 
أفريقيا وتبه الجزيرة العربية قذ خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك في 
الفتتوئ الاستماصي تنكان الجزدن 1121 


بلغ عدد سكان جزيرة سقطرى وفقاً لنتائج التعداد السكاني لعام 1994م حوالي (65.514) نسمة وبلع 135020 
عام 5[.2004]. وكات جزيرة سقطرى عاصمة الدلطنة المهريه إلى عام 1967 حيت سقطت بيد افراد من 
الجبهه القوميه القادمه من اليمن وانضمت إلى اليمن الجتوبي تم إلى اليمن الموحدء الجينات التي تم اخذها من 
جزيرة سقطرى هي جينات عربيه نقيه لم تتأتر بأي عوامل خارجيه والسقطريون هم من قبائل سائده اي ان 
الجينات هي جينات عربية نقيه سائده وليست فرع .وهذا ان دل على شي فأنه يذل على انهم حافظوا على نسبهم 
العربي النقي.قبينة المهره وقبينة جهينه وقبينة الجهضمي وقبائل الساده وقبيلة مذحج وقبيلة كندة وقبائل الممالك 
اليمنيه القديمه وعلى رأمهم قبيلة جميّر هم سكان سقطرى الأوائل. 

تصس 
تنص 


111111111111111 ل مم 
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-- 
شرح كود التطبيق :11113/11) 


في السطر ١-؛‏ : يتم كتابتها تلقائيا عند استخدام برنامج الدريم ويفر الذي ستستخدمه فيما بعد لعمل صفحات الويب لكن هنا عليك كتابة كل سطر يدويا 
وبالطريقة التي تعلمناها. 


قيمة <1(000137215> توضع دائما اعلى الصفحة أي في منطقة الرأس وهي تخبر المتصفح عن نوعية الاكواد المستخدمة في الصفحة سواء 
1117311 ,5211311 أو خليط بينهما حتى يتم التعامل معها بشكل صيح وسليم لكي يظهر للمستخدم بشكل منسق وفي السطر الثاني سطر لنوع اللغة 
المستخدمة والداعم لها وهي شركة ع-ه.73.ثم بعد ذلك فتحنا منطقة ال 22980 . 


السطر الرابع مهم للغة العربية او لغة الترميز التي يتم إعلام المتصفح بأن يعتمدها في عرض الموقع لأي شخص ويتقبل اللغة العربية. وتكتب داخل 
منطقة ال 18620 .في السطر 6-5 العنوان الخاص بالموقع داخل الكود المخصص ., ثم إغلاق ال 2620 . 


1-7 في السطر الثامن قمنا بفتح محتوى الموقع او جسم الموقع <7009> .واضفنا داخله كود لون الخلفية وحدد كود اللون 
'"411101137"--0010ع7 . في السطر التاسع قمنا بعمل جدول وبدأنا بعمله بالكود <81016)> ثم اعطينا هذا الجدول خصائص وهي : 


"710-800 خاصية العرض تم تعيين عرض الموقع ٠٠١‏ بكسل 
"66211" -2ع 11ج خاصية اتجاه الموقع او مكانه وحددنا المنتصف مرع)1رء» 
'""1"-:1201:0161 خاصية مقدار سمك حواف الجدول وحددنا ١‏ بكسل جرب ارقام ولاحظ, 


''4116600"-:-101:061:20101 خاصية لون سمك الحواف وحدد لون معين . 


"'1"-011 خاصية بدء المحتويات من اليمين لليسار او من اليسار لليمين هنا حددنا من اليمين الى اليسار 74[1. من السطر ١5-١١‏ هنا قمنا بعمل 
الصف الاول في الجدول والذين حددناه سابقا بأنه سيكون خاص بترويسة الموقع قمنا بفتح صف وهو الصف الاول في الجدول <1)> ثم الخلية الوحيدة 
في الصف <0)> ثم وضعنا كود الصورة الترويسة الخاصة بالموقع وحددنا اسم الصورة ومكانها داخل مجلد اسمه وع2ؤ كما في الكود < 11226 
''م .ع0 2عط/وعددةذ" -ع-و> .ثم أغلقنا الخلية ثم الصف <0)/> <-0/>. 


من السطر ١١‏ الى السطر 5" قمنا بفتح الصف ثم الخلية واضفنا كود <7> الخاص بتفخيم الخط ثم أضفنا كود عمل الرابط او الزر كما تعلمناه مسبقا 
قمنا بعمل <""-/ع21 ج > وهي بداية كود اللينك او الرابط او زر في القائمة الرئيسية لن اشرح كل حرف لأنه مشروح مسبقا فقط ما بين علامتي 
التنصيص وهي وجهة الرابط تركناه فارغا الى ان ننتهي من الصفحة كاملة وننسخ عدة صفحات نسخ عادي ونضع محتوى حسب ما نريد ثم نأخذ اسم 
الصفحة المراد الانتقال اليه عند ضغط الرابط ونضع اسمها مع الامتداد التابع لها مثل : <''1206:2.567[1" 1:24 >2 .بعد ان انهينا عمل بداية 
الرابط عملنا كود الخط واضفناه لعمل لون لاسم الزر او الرابط وحددنا رمز اللون كما ترون ثم أغلقنا الخط وبعده اغلقنا الرابط ثم أغلقنا كود تفخيم 
النص .اضفنا كود او تاق (5157؛) لعمل فراغات بين الرابط والذي يليه وهكذا مع بقية الروابط الى نهاية الخلية ونغلقهاء ثم نغلق الصف. 


من السطر 7" الى ١١‏ بعد أن انهينا عمل الصف الذي يحوي الترويسة ثم قائمة الأزرار ننتقل لمرحلة عمل المحتوى للصفحة قمنا هنا بعمل صف 
جديد ثم فتحنا خليه وهي الأخيرة في جدول الموقع وداخل الخلية هذه سيتم وضع جدول داخل الجدول الرئيسي للموقع لماذا؟ جاءت هذه الفكرة من باب 
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التنظيم وضبط محتوى الموقع والتسهيل وحتى لا يتأثر الجدول الرئيسي بالمحتوى. قمنا بعمل جدول وكما تعلمنا فتحنا جدول وعملنا صف وفتحنا الصف 
ثم عملنا خليتين الأولى للصورة والثانية للنص. أي لدينا جدول عمودين والصفوف مفتوح لمن اراد يزيد. نغلق الجدول ثم نغلق الخلية ثم الصف ثم 
الجدول الرئيسي. بعدها ننهي محتوى صفحة ال[دمغط وهي ال <5009/> ثم ٠‏ <لصنغط/ل>. 
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) 


أعع51 51 25»20105) 101 كلصواد 055) 


لغة تحدد شكل وثيقة 
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الباب الثالث 55) 


6 #رع نالع بلالقع0 ©هعمو80 [«م| 
أ 501 3800 ,كأقمقء0مم ,كملا )3165| ا 500 
5 4 .008 عو810 هع ملم 
برنامج الدريم ويكر (056) ناء257ع اتتتددء 101 00 4) 
أحد البرامج المهمة والمستخدم في عمل صفحات المواقع الالكترونية سواء صفحات ال71117 وعمل الأكواد الخاصة ب,71173/11 وايضا الأكواد الخاصة 
بملفات ال55) وغيرها. ويمكن تحميل البرنامج من موقعه الرسمي او أخذ اسطوانة فيها برامج ال 056) 400176 او ما فوق من أي مركز تجاري في 


مجال الحاسوب أو من أي موقع آخر وتحميله على الجهاز ثم التركيب. 
صورة عامة للبرنامج 


|« لساحا ساي ١‏ - عموسده حش + +80 مءنا سولمتاطا ع5 كلممسموم +تصممع تاها +بعدمة1 معتنا جتع عع لالا(] 


دمع ؛! أمععع2 ه معم0. 


9 
2 
8 
5 
2 
5 
5 


(ومعلأنا) كعنكدةط م10 
ا ا شق .امه القامم1 


الاعابمع 01 ماوع برعا( 056 | 0 يللا 
مامه لكامم1 


ممند 0101 
ميرم كقع.عأةاممع الوه 


هابا أذ/زاماة0 8510255 ا ء6 دقع .امه ؟لاموع_مع الا 


اماع 5ق اول 
لكا 


لأا قالمع اءأنان..._68.00-مع/ قوع 
الأاع قالمع اءآنان..._68.500مع قوع 
كهع. لالع القع 

عع .ع الزاولدويه 

ملام 2م5_بلاملاك_...الامذاك_ذبلاع0_0ممم 
.مم0 


اعمقه كومنااكمة1 055 ] 


دع (عنوب5 عاطما! بمعنهز | زور ١١‏ ...أناملاها 664 اباط 
...5116 عع باقع باقع 0 


اعمهم قاان8 موقعمههم | 5 ا 


...5116 أولزلهاة0 55عملونا8 
...عه 5 .هارا 


56 هيع نوع القع 0 هعمل0م « لع51304 ومتقاعو ‏ 
ماع50 300 ,كأققء00م ,كمنا أدعثها عط لمك « مع لاقع بنعاز 


.عونا عو8,0 هعمولم 


لاير لاير لاير لاير لاير لاوز ىم مق مق 0 


« وعم ناموع8 |[ 


« 809 اعياع بع باقع /الالرقع0 


متقوة بانمطله 20005 [ 


من خلال الصورة أعلاه وبحسب الترقيم : 

هذه هي واجهة برنامج او حزمة ال0256) :1201633596891 في بداية فتح البرنامج تظهر نافذة ضمن البرنامج تعطيك آخر الملفات التي كنت تعمل 
عليها. أو تقوم بإنشاء جديد. 

من خلال (18116) يمكننا انشاء ملف جديد ١‏ فتح ملف , فتح آخر الملفات التي تم العمل عليها . الحفظ , الحفظ بأي صيغة وغيره. 

من خلال (17016) يمكننا التعديل على الملف الذي نعمل عليه سواء من حيث النسخ واللصق والقص والبحث عن كود معين او أكواد مكررة وغيرها من 
العمليات. 


(5736) ومن خلالها يمكننا التعديل على نوافذ البرنامج نفسه او عرض نوافذ التنفيذ والعمل ايضا وغيرها. 


(125616) من هنا يمكننا ادخال اي عنصر مع الكود بشكل جاهز سواء لصور او فيديوهات او جداول واشياء أخرى. 
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ماهى لغة او تقنية ال 55) ؟ 
هي لغة تصميم وتنسيق تحدد شكل وثيقة او صفحة الويب 7111 من خلالها يمكنك تحديد شكل صفحة الويب وتنسيقها من حيث الشكل والمقاسات 
والمساحة وألوان الخلفيات والخطوط بكل دقة وحرفية. 


ما الفرق بين 2055 و.721173/11؟ 


لغة ال ,7117311 تحدد هيكل واساسيات صفحة الويب او الموقعء بينما لغة 055 أكثر حرفية وسيطرة على شكل صفحة الويب وأكثر توسع ودقة 
وتقنيات أحدث من غيرها. 


3 1 1 جمد عط ل 
طرق العمل على الد55) <21216<>2121> | 0 
5 

هناك ثلاث طرق للعمل لغة ال 55 : </ "دق .ع1ئزع5 "2ععطط "وق /رعجزوج "حموزء "عمع طوع 5231 "2281-7 1151» ]| © 
على 7 

<20دع2/ > | ك 


طريقة السطر الوحد )عع516 ©5071 26ن1د1. 
طريقة الربط الداخلي )عع512 56712 1212121 . 


طريقة الملف الخارجي ]ع516 51716 [105)1112. 


طريقة السطر الواحد اعع516 56716 عدنلم1 : 


من خلال هذه الطريقة يمكنك عمل كود ال 5 في نفس سطر الجزء الذي تريد عمل تنسيق له او ضبط. وكمثال على ذلك: عمل تنسيق 
لنص معين بواسطة ال95١'6‏ 


< '' ام 021-512:12] :0000]]# :-10م»"'<»71و م>هنا نص معين <7/> 


كما تشاهدون أعلاه عملنا تنسيق لنص معين حددنا لون النص وحجمه بواسطة كود بسيط كمثال في الشروحات القادمة سنتعمق أكثر في 
أكواد ال 055 . 


طريقة الربط الداخلي 5164 517:16 1201081 : 


<520هع2> 3 

4 >21516<>51516< 

5 

<"5قت /لععزوع "حم جاع 521716> 6 
©8562 50635 0022625 055 7 

8 > / 561712< 

9 

<0دع2/ > ل إواء 


في هذه الطريقة يمكنك عمل كود ال 2595© داخل منطقة ال <120/> <11680> تنشئ كود معين خاص بالتنسيق وفي داخل الصفحة في الاسفل 
والجزء الذي تريد تنسيقه تقوم باستدعاء هذا الكود مجرد استدعاء لا غير. ومن الشكل: 


من السطر " الى السطر 7 يخص كود ال 255 السطر " بداية الكود وهو إشعار المتصفح بأن الكود التالي هو كود ال 2595 .السطر " يمكننا عمل 
اكواد منفصلة كل كود له خواص معينة لأننا سنحتاج لكل جزء في الموقع كود معين ولن نطبق كود واحد لكل الموقع. 
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طريقة الملف الخارجي )51664 50716 172)©1021 : 


هي الطريقة المستخدمة والأكثر حرفية والتي ستقوم باستخدامها لعمل المواقع الكبيرة أو موقع مؤسستك او موقعك الشخصي. وهي أن تقوم بعمل ملف 
خاص بكود ال 55) وفي هذا الملف تضع جميع أكوادك الخاصة بالموقع أو حتى بالإمكان عمل عدة ملفات من أكواد ال 0055 حسب حجم عملك 
وطريقة ترتيبك ويكون الملف بهذه بصيغة وون. مثلا لدينا ملف وو بأي اسم سيكون شكله التالي: ووع.5)07916 ملف 055) اسمه 7916و وال ووح. 
ترمز إلى أن الملف هو من نوع 55©. 


الشكل العام لهذه الطريقة كالتالي: 


في السطر 5 طريقة استدعاء الملف الذي يحوي كود ال 255) وكأن الأكود كلها موجودة في صفحة موقعك ويمكن استدعائها مثل كود ال 655 
الداخلي. 


عناصر هامة تستخدم ال 055 في ال 111111 (1ل - ندم ). 
استخدمنا في الباب الأول في دروس ال ,711711 الجداول لبناء الموقع هنا سنبني مواقع بدون استخدام الجداول الا اذا اقتضت الحاجه 
وقبل ان نتعلم حول ما هو ال 015 نسرد هنا بعض اسباب تفضيل المبرمجين له عن الجداول: 

- مرونة استخدام ال015 وسهولة تعديله والتحكم به وباحترافيه. 

- اللاؤل صديق لمحركات البحث. 

- الجداول تعطي مظهر سيئ عند تحميل الصفحات ويبطئ التصفح. 


- كود أو وسم الآ/21 (146 عده1::151): 


هو عبارة عن وحدة احتواء لعناصر صفحة الويب وبطريقة اخرى كبسلة العناصر وتقسيم محتوى صفحة الويب الى اقسام. ويكتب داخل 
صفحة الويب سواء ال ,5117311 أو ال 2112 بالشكل التالي: 


في الشكل امامك في السطر ٠١‏ هو بداية فتح كود ال1(117 »في السطر ا 
١١‏ أغلقنا الكود وما بيذ | العناصر التي 1 5 يها ال 1117 <"#4000058 :10م "561:16 03> 
سنتعلم ال 055) على ال1(1175 بشكل واسع في الصفحات القادمة نه 7 
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- كود أو وسم ال52411 (140 8401 5) : 


هو كود او وسم يتم استخدامه للنصوص والتحكم في خصائصها .في الغالب يستخدم ال019 بدلا عنها ولاختصار الوقت والعمل يعمل الكود 
ويكتب كالتالي: كما في الشكل السطر ٠١‏ بدأنا كود الدرومه بداخله استخدمنا استايل نوع »عدرذامة ووضعنا خاصية اللون الازرق للنص 
ووضعنا النص في وسط الكود ثم اغلقنا ال50211. 


8 >20017< 


9 

<5232 /> هتنا سيكون التص ازرق <"051052:5211212"-515316 5532> 10 
11 

<017 0ط > 12 

ا 


طريقة عمل ملف ال055) وربطه بصفحة الموقع : 


من خلال برنامج ال 256 10163115968313 والذي نستخدمه في أعمالنا نقوم بالخطوات التالية: 


نقوم بتجهيز مجلد خاص ونسميه 055) في اي مكان في جهازك. نفتح برنامج الدريم ويفر 7276322592510 ونضغط 1814 ثم 1186 
ستظهر نافذة نختار أو خيار وهو ,7113711 ثم نضغط ع22026) أسفل النافذة على اليمين. هذه الخطوة لعمل ملف ,111711 صفحة ويب 
رئيسية للموقع الذي سنعمل عليه بال055 . 


نقوم بحفظ ملف ال/21711 .نضغط 0001 مع حرف 5 او من أعلى حفظ باسم ثم نحدد مكان المجلد الذي سنضع فيه محتويات العمل 
ونضع اسم للملف وليكن 13062.31 . ننشئ ملف وو .مرة أخرى نضغط على »11 ثم 2687 ثم نختار من النافذة الخيار السابع وهو 
5 ثم نضغط زر ©79). نحفظ ملف ال 055). بعد ظهوره نقوم بحفظ الملف كما في الطريقة السابق بجانب ملف ال.1117/11 ونسميه 
ع71. لربط ملف ال وو» مع ملف ال16001 او صفحة الموقع نكتب ما بين ال 120 السطر التالي: 


3 >26520< 

</ "2-8 جاجع قناقطه ‏ : للقطط عجعج "6-2 ع تج رمه "625-156 00525 "15-7 ناوه جع 25 21253> 4 
<61215>/512516تنا 120 60 2531151آ<6 251 23> ]2< إن 

6 

</ "دوع . 2262-5116 " 5ق وج /ناعزع 6 6126-7 "7"563216526686->261 1321> 7 

8 

<20ع22/> اك 


سطر 7 وهو كود الرابط (1101) مجرد كتابة الحرف الاول من الكود يساعدك البرنامج في كتابته. 


1 وترمز للغة الملف وحدد 5091651264 وهي موجودة في البرنامج تختارها اختيار فقط.عم7) وترمز لنوع الملف وتم تحديد ما بين 
القوسين اعلاه. 


أما +ع[ فهي ترمز لمكان الملف وعند كتابتك له يساعدك البرنامج في تحديد مكان الملف وسيتكفل بكتابة كود المكان. سيصبح لدينا ملفين 
هما [2:)ط.:1016 وهي صفحة الويب وملف آخر هو و567916.05 وهو ملف ال55) الذي سيتحكم بشكل صفحة ال.111711 او موقعنا. 
كما في الشكل: 


تكتلرية | ( د | امغطيع ما عع رميوع جلو 
مع لناعه0] غعع]5 عان5 ومألمء35- مع صمسعه0 1/1 ل عمط 0-007 
معغط 41 | طقلا كع برط 318 000 


5ع رن 
كمقهاصيه0 إل 

كعءواط أمععع8 إك 
عمانابوا5 5ه 
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خاصية الوراتة 

تستخدم ال 0255 خاصية الوراثة» والوراثة هي استدعاء خواص معينه لتطبيقها على 7117 او نص داخل صفحة الويب. لماذا هذا 
الخاصية؟ جاءت هذه الخاصية لتسهيل العمل في ال095) فبدلا من ان تقوم بعمل جدول او نص او 1117 داخل صفحات الويب ويكون 
عددها كبير ستضطر انك تضع خصائص الاستايل في كل جدول و0197 ونص وتخيل عددها كبير.! لذلك جاءت خاصية الوراثة والتي تمكنك 
لعمل خواص معينة (الوان - مقاسات - ابعاد .. الخ ) داخل شيء اسمه و0129 في ملف وو2 وعند عمل 019 مثلا او جدول تقوم بعمل كود 
بسيط وتقول للجدول او النص او ال019 خذ خصائصك من هذا الكلاس فقط. هذه هي الفكرة العامة للوراثة والكلاسات (01955). عملية 


جو 


وطريقة بسيطة جدا وممتعه نتعلمها في الدروس التالية. 
خواص عامة في ال085 : 


هناك بعض العناصر في صفحة الويب اساسية ومعروفة وفي الغالب لايتم عمل كلاس (01,4.55)) لها وتحديد خواصها مباشرة في ملف ال 
59 بمثلا: 83 2ط 1ط - نوهوط الخ, 


٠. 8 ٠. ١ 0-2 ٠‏ | 5 0 /ي« 
جع ل ع حو ص للج00ط من خلال (14222 : 2025-5326 : 5623 . ,م قتتتمطة 12‏ :7م11 تتتوع -20525 4 037م0ط 
الكود التالي: ( :#4000222 :12م ) قط 


(56212 ,11765 ,"20033133 6م111 131765" : غ11 ختتتة ع -20225 4 24 , 23 , 51,22 


ان شر اه 65 ل 6 كا 


في السطر ؛ حددنا خصائص ال78003 كاملة 
اي ان اي عنصر او نص داخل ال8003 ليس لديه كلاس او خصائص معينه سيتم تعميم خواص ال :007/عليه مباشرة. في السطر " تم 
عمل لون للخطوط من نوع 121 والتي تعلمناها مسبقا في باب ال 14:1 وحدننا له لون معين لذلك اذا في كان هناك في الصفحة اي نص 11 
سيأخذ هذه الخاصة تلقائيا. 


في السطر ١‏ لو اردنا عمل خاصية لأكثر من عنصر مثلا 11 و 82 هناك طريقة بسيطة نضعهم جميعا ونفصل بينهم بعلامة (,) والتي 
تعني (و) واو المعية. 


الكلاسات والهوية فى ال 055 (10, 613555 655) 


خاصية ال11 او الهوية: 


هي خاصية او مُحدد (12م)ع»5616) يستخدمها (:145 : 2025-5126 :4930930: 2223022460102 [ كن 
الوون لتحديد نمط او خصائص عنصر معين 
واحد فقط داخل صفحة الويب. ويعمل نفس عمل الكلاس لكنه لا يتكرر لأن الكلاس يعمل على تحديد نمط وشكل عنصر او مجموعة عناصر. 
ويكتب في ملف الووى بالشكل أعلاه تم إنشاء 10 وسمي 1862061 ويتم استدعائه في صفحة الويب والموقع بالشكل التالي: 


<60017ط> 


<015/> هتا المحتوى <"2ع320ع58"-310 01> 


من خلال المثال أعلى اي محتوى داخل ال019 سيأخذ الخصائنص الموجودة في ملف ال 255) اللون والحجم. 
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خاصية ال 5ع1355) 
خاصية الكلاسات في ال 0255 تستخدم لتحديد شكل عنصر او أكثر في الموقع وغالبا ما تستخدم لمجموعة عناصر خلافا ل10.ويطبق 
بالشكل التالي في ملف ال55© : 

ات اءك 


0660 :20602 
: 53315-5621 ,5626573 ,1320233 : 117 ققتة 2 -0215 12 


في الشكل أعلاه قمنا بعمل كلاس واسمه 1620161 ووضعنا قبل الاسم نقطة وتشير إلى أنه كلاس وليس 019 .بعد الاسم فتحنا القوس في 
السطر 7 وضعنا خاصية اللون وفي السطر ‏ أضفنا خاصية اسم الخط او نوعه. في السطر العاشر أغلقنا قوس الكلاس. 
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خصائص الضبط فى ال 055 
سنقوم بسرد الخصائص الهامة والمعمول بها بكثرة في مواقع الويب وتطبيق هذه الخصائص عمليا معاً. وقبل البدء بالتطبيق على الخواص 
وسردها سنقوم الان بعمل صفحة بسيطة فيها 019 ونصوص. في صفحة ال 1206.56031 التي انشأناها مسبقاً نقوم بعمل الكود التالي: 
<017ه0ط> 
<015/> هتنا ترويسة الموقع <"2832062"-10 01> 


<*01/> هتا القائمة <01> 


<041757/> هتنا محتوى الموقع ‏ <017> 


في الحقيقة الكود السابق عبارة عن " صناديق او مربعات لكن عند تطبيقها وعرضها في المتصفح ستظهر بالشكل التالي: 


هنا يأتي دور ال 55) لتحويل هذا الشكل من لا شيء إلى شيء واضح وجميل. داخل ملف ال 055) سنقوم الان بعمل 10 لترويسة الموقع 
وليكن اسمه #1262061 وداخل ال019 للترويسة نجعله يستدعيها كما وضعناها من قبل شاهد أعلاه. في ال0198 الخاص بالقائمة سنضع لها 
كلاس وليكن اسمه 226121. ونضع ايضا كلاس لصندوق المحتوى وليكن اسمه 0014624. وسيتساءل البعض لماذا الصندوق الاول وضعنا 
0 ووضعنا 1255 للصناديق الباقية؟ بعد فهمك لهما يمكنك عمل ما تريد ليس هناك قيود وقد عرفناهما من قبل وعرفنا الفرق وحسب 
سياسة بناء مواقعك يمكنك استخدام ما تريد. 


نبدأ بتجهيز الكلاسات داخل ملف ال095) وستظهر فارغة بالشكل التالي: 


:"52-8" ععم25وطء6 | #" 
2 

3 

( 24ع20ع2 | إن 

5 

6 .2022114 [ 

7 

8 02 

9 


كما تلاحظ أعلاه وضعنا الكلاسات وسميناها حسب ما اتفقنا مسبقاً وعملنا حفظ للملف .يأتي الان دور استدعاء هذه الكلاسات 


الويب 106.021 كل صندوق أو 018 يستدعي الكلاس الخاص به. وسيكون الاستدعاء كما بالشكل التالي: 


3 
9 


<0417/> هنا ترويسة الموقع <"2ع20ع2"-10 017> | باه 


13 

<017/> هتا القائمة <"1اطع0"-13255 03> 1 الام 

15 

<017/> هنا محتوى الموقع <"26ع 2 2م "-1355 03> 001 0" 
17 


كما هو في الشكل اعلاه صندوق او 019 الترويسة استدعى ال10 الخاص به وهو 1863061 وال019 التابع للقائمة استدعى الكلاس التابع 
له وهو :1جرءعدر وال 018 الأخير الخاص بمحتوى الموقع أيضا استدعى الكلاس الخاص به. قم بالتطبيق .هل وجدت تغييرات ؟ طبعا لا .لأنك 
كما تلاحظ أعلى في ملف الوو6916.0 الذي وضعنا فيه الكلاسات مازالت فراغة وليس بها اي خصائص في الدروس القادمة سنقوم 
بتعبئتها وتغيير شكل الموقع بشكل كامل كل خاصية على حده. 
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خاصية الحدود أو الجوائب (5:ع80:0 055) 


من خلال هذه الخاصية يمكنك عمل حدود للصندوق ووضع لون مناسب ايضا وستايل محدد للحدود ايضا. والحدود هنا لها ثلاث قيم : 


-١‏ عرض الحدود (191011112-:701:061): وهي لتعيين عرض الحدود قد يكون عرض نحيف او ثخين او متوسط. 
؟- شكل الحدود (©5691 -101:0161):وهي تعيين شكل الحدود إما منقط أو خط مقطع او خط عادي. 
“- لون الحدود(::2»010 -01067):يمكنك أيضا تعيين لون الحدود بأي لون تحدده. 


يمكن كتابة الكود بالشكل التالي (التطبيق على الترويسة الخاصة بالمثال) : 


4 ع0 عط 
#3 :م02 1ع -2ع206ه0ظ 
:1601.1 : 06 2062-1131 0ط 
1 |2022 : ع1زعه-طع طامط 


.1062114 [ 


. 0256264 ( 


في السطر ه استخدمنا احد خاصية الحدود وهي اللون وحددنها ثم أغلقنا بفاصلة منقوطة وهي مهمة جدا(الفاصلة) . 


(ملاحظة في برنامج الدريم ويفر الذي سنستخدمه يساعدك كثيرا في عمل البرمجة فهنا مجرد عمل كلمة 2010161 سيقوم البرنامج بوضع 
خيارات كثيرة مامألا لكر له 11117 1ز1181018لورمم ,) ,ف لطر * حددنا العرض واخترنا 
0 وتعني متوسط. في الغالب نستخدم خاصية البيكسل وهي بدل 726011113 نكتب :م1 او أي عرض نريده. جربها سنستخدمها 
بكثرة فيما بعد. 


في السطر السابع حددنا شكل الحدود واخترنا 001660 وتعني منقط هناك خيارات كثيرة ستظهر لك في البرنامج وغالبا نستخدم 50110 هذه 
الخاصية حدود خط واحد. 


بعد شرح الكود وحفظ الملف نأتي لنرى النتيجة سيظهر الموقع في صفحتنا [106:.:2 بالشكل التالي : 


من خلال ملاحظتك للموقع ستتساءل لغرابة الشكل .لكنا دعنا نقوم ببعض التعديلات وخواص الحدود وانظر الكود التالي: 


الماع لكان 
:2062-0102 ه520 
: 202062-13 
( :202062-12 


اركف إن |5 كا 


قمنا بتعديل العرض واخترنا العرض :م1 وتعني واحد بكسل فقط. عدلنا شكل الحدود من منقط إلى خط عادي50110 وسيظهر الموقع 
بالشكل التالي: 
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كما رأيت في الشكل السابق عملنا 10 ووضعنا خاصية واحدة من خصائص ال55) وهي ال17010612 بقيمها المتنوعة .نقوم الان بنسخ 
نفس خصائص ال 11 للكلاسات الخاصة بالقائمة والمحتوى وسيظهر الكود في ملف ال88) بالشكل التالي: 


اع ادق 
3 :102 -2ع عوط 
:062 1ة-عدع عمط 
(2062-512:10و0ط 


161211 . 
3 :2062-0102 هط 
:6 : 062 202062-13 
20682-51716:5011342همط 


اه 
3 :102 -2ع لوط 
:5 : ط7106ة-عع 2020 
:202062-12 


قم بالحفظ وافتح صفحة الموقع في المتصفح مرة أخرى لنرى النتيجة. ستراها بالشكل التالي: 


2214 | ل 
2ت2ام1 #4933:ععملوعمط 5 
0 6 


لاحظ. وكأنك تقول برمجيا: الحافة تأخذ لون #993 وعرض :م1 وشكل 501101 من دون أن تكتب الخاصية. وهي الطريقة الأسهل والاسرع 
والافضل. 
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قم بتجربة الخصائص والقيم التالية في ال مرء0تروط : 


5 


الخاصية 


بعناأة/ا :مامع أطوءدعع0ه0ط 


(عنااهلا : تعني القيم التي تختارها) 


زعنااأةلا تعابنادأطوء-ءع00ط 


بعنااة/ا تطكأل ألا أطو عمط 


2333333 50110 غ2ام1 :ممغا-مع0مط 


تعنااة/ا :عالضد-مم-مع0:0م 


زعنااقلا تطأل أننا-مما-مع0مط 


الوظيفة 

خاصية اللون للحافة اليمنى فقط 

(في التطبيق السابق طبقنا على جميع الحواف وهنا يمكنك عمل خصائص للجوانب 
التي تريدها سواءً 50])01 - ا1ع1 - غطع 1" - مرهغ) 

خاصية شكل الحافة يمين فقط 

خاصية عرض الحاثة من اليمين فقط 

خاصية الحافة للأعلى: عرض م1 نوع 0111و اللون كما هو محدد 

خاصية نوع الحدود في الأعلى (منقط - خط ) 


خاصية عرض الحدود في الأعلى 
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خاصية الطول والعرض أغطعنء11 220 1171011 55)) 
من خلال هذه الخاصية يمكنك التحكم بمقاسات الطول والعرض داخل صفحة الويب وهي من الخواص المهمة في ال95© وتكتب بالشكل 
التالي: 


| 2214 

جت2<ام1 #4933:عع ل عمط 5 
:2 :71062 6 

7 261025 : 5: 

8 / 

9 


خاصية 1011 وتعني العرض في السطر 5 وتضع القيمة المناسبة ثم الفاصلة المنقوطة. السطر ٠‏ أاعأاعط وتعني الارتفاع وتحدد لها 


القيمة. 
طبعا يمكنك عمل القيمة بثلاث طرق وهي : 

-١‏ القيمة بالبيكسل مثل : كما في المثال السابق. 

؟"- القيمة بالنسبة مثل : :7106:5090 وتعني خمسين في المائة من عرض المتصفح لأي مستخدم. 

"- القيمة الاتوماتيكية مثل : :21140 :7710111 وتعني مقاس اتوماتيكي أي اذا يصغر ويكبر سواء الطول والعرض حسب المحتوى 


للموقع مثل الطول لا تستطيع ان تجزم بطول الموقع مثلا لديك مقالة في موقع اخباري منها الصغيرة والكبيرة يكبر الطول مع 
المقالة الطويلة ويصغر مع الصغيرة. 


طبق المقاسات السابقة على الدرع0جع12 في الموقع الخاص بالتطبيق. سينتج لك الشكل التالي: 


لاحظ شكل الموقع العرض اصبح ٠٠١‏ بكسل والطول 1٠٠١‏ سنقوم الان بتعديل الطول وجعله ٠٠١‏ بكسل. أيضا نقوم بوضع مقاسات 
القائمة من خلال الكلاس الخاص بها الطول ٠‏ ؛بكسل العرض ٠٠١‏ بكسل ايضا المحتوى نضع له مقاس خاص به العرض ٠٠١‏ بكسل 
الطول نجعله اتوماتيكي. وسيظهر الكود بالشكل التالي: 
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1ط 
10 :م1 #4933:ععملعمط 
:771062 
:2 : ططودعظ 
0 


2161221 . 
:505110 م1 #4933:ععملعمط 
:71062 
2ع*تص40: عطو دعط 


5م12 24933 :2م20 هط4 طء 6 2مك . 
:71062 
: 25هو1ه26آ 


بعد عمل الكود أعلاه وحفظه نقوم بتجربة الموقع او الصفحة الخاصة بالتطبيق وستظهر بالشكل التالي: 


هنا ترويسة الموقع 


هنا القائمةا 


هنا محتوى الموقع 


الهوامش (كداع :112 655): 
ونعني بالهوامش هنا المساحات الجانبية او الافقية وهي مقدار بعد العنصر عن الأعلى أو الاسفل او اليمين واليسار. وتكتب بأحد الأشكال 
التالية: 


1 2-11أع:121 وتعني مقدار الهامش من اليمن. 
112-111ع:231 وتعني مقدار الهامش من اليسار. 
هغ-2أع:231 وتعني مقدار الهامش من أعلى. 
102 1- 2ع :2221 وتعني مقدار الهامش من أسفل. 


بالنسبة للقيم بمكن ان تكون بالبيكسل أو اتوماتيكي وسيتم وتطبيق كلا منهما على حده. وسنقوم بتطبيق جميع الخصائص اعلاه للهوامش في 
التطبيق الخاص بنا وبالتحديد ل 162011 وسيكون بالشكل التالي: 


04 
5م10 #4933:جععملعمط 
:2م00 : طع 710 
:5 :: 2610125 
:2 : 025 2082012-21 
: 203121-16215 2015 
: م50 -121 208201 
:5011 72012203121-5015 
]1 
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كما تشاهد أعلاه في السطر 8 حددنا هامش الترويسة من اليمين وحددنا الهامش بمقدار © بكسلء أيضا السطر 5 حددنا الهامش من جهة اليسار بمقدار 
ه بكسل السطر ٠١‏ حددنا الهامش من الجهة العلوية بمقدار © بكسلء أيضا في السطر ١١‏ حددنا الهامش من اسفل بمقدار ه بكسل. 


نأتي الآن لمشاهدة النتيجة وكيف سيظهر شكل الموقع بعد حفظ التغييرات أعلاه. وحسب الشكل التالي: 


هنا ترووسة لامرك 


لاحظ في المثال أعلاه ان الترويسة تم إبعادها عن جميع الجوانب بمقدار 5 بكسل. إذا اردنا ان نجعل الترويسة او أي صندوق في الموقع في وسط 
الصفحة او المتصفح نقوم بعمل قيمة (2040) لكل من الهامش من اليسار واليمين فقط. وتعني ان الموقع يظهر في وسط المتصفح سواء كان طويلا او 
عريضا. نقوم بتطبيق ذلك وسيكون بالشكل التالي(لاحظ السطرين /و1): 


24 
1 *م1 #4933:جععم عمط 
:052 : طع 710 
:5 : 261025 
: 31150 : 21و 2152012-21 
: 31150 : 2152012-16 
: م50 -2031122 213 
: 1550131 2031121-20 2018 


هناك طريقة لدمج جميع القيم الخاصة بالهامش في سطر واحد وايضا طريقة أخرى لجعل جميع الصناديق داخل صندوق واحد ونقوم بتوسيط الصندوق 
الذي سيحتوي على الصناديق أو ال0198 الموجودات في موقعنا. 
في البداية نقوم بجمع جميع ال019 داخل ديف واحد ولنسميه 81م ونضع له كلاس ونسميه ايضا «رؤجدم سيكون الكود في صفحة ال 1021 كالتالي: 
<"51812" 1355 01> 
<017/> هنا ترويسة الموقع <"2ع20عظط"-10 01> 


<017/> هنا القائمة <"21212211" >1355 01> 


<017/> هنا محتوى الموقع <"26626 2م "1355-7 01> 
<01 /> 


في السطر ١5‏ فتحنا ال019 واعطيناه كلاس 2311 وفي السطر ١8‏ أغلقناه وجعلنا جميع ال019 البقية داخله. سنقوم الان بوضع الخصائص المناسبة 
للكلاس 221 في ملف و50916.05 وستكون خصائصه بالشكل التالي: 


85 
356 122012:0 
:2 50114 4230 :ععلعمط 
+ : طع 110 


قمنا بعمل الكلاس الخاص بال019 العام الذي سيحوي جميع محتوى الموقع :ؤه: .في السطر ه استخدمنا خاصية الهامش بطريقة أخرى وهي تعني 
مقدار الهامشن لأعلى وانتفل يساوي صقن ومقدان الهائق من اليميخ واليسان اتوماقيضي, وهن اختضان للشكل الثالى من السطن + الى السطل ١‏ + 
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1-014 
:5 50114 4830 :ععلعمط 
:1711062 
: م 5122012-26 
:60121 2122012-56 
: 2150 : 21 2182012-16 
: 215و21182012-21 
1 


بعد تطبيق الكود السابق الخاص بال015 العام والهامش للتوسيط سيظهر لنا الموقع بالشكل التالي: 


هنا ترويسة الموقم 
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ظر ان 


مم مم 
5 ل 66 مه ات سر 


سنقوم بإلغاء اللون الأحمر الخاص بحدود ال019 العام ونكتفي به كتوسيط وحاوي لبقية ال010 .سنلغي السطر رقم © من كلاس 751813 حتى لا يظهر 
الحدود الخاصة به. ويكون معنا الشكل التالي: 


هنا ترويسة الموقع| 


هنا القائمتأً 


هنا محتوى الموقع| 


من خلال ملاحظتنا للتطبيق أعلاه سنقوم بعمل مسافة ما بين القائمة والترويسة وما بين محتوى الموقع والقائمة. فكر ماذا يمكن ان نقوم به وما هو 
الكود الذي سنستخدمه النتيجة في الشكل كالتالي: 


هنا ترويسة الموقع] 


هنا القائمةأ 


هنا محتوى الموقع 


الحل : قمنا بعمل مساحة هامش من أعلى لكل من كلاس القائمة وكلاس محتوى الموقع بمقدار ” بكسل في السطرين ١8‏ و 4 "7 كما في الكود التالي: 


: م50 -201122 2018 
هت2<تم1 #933:ععملعمط 
:502 : ط6 110 

( :2ء*ام40:عطو1اعط 


:م1 #4933 :2م20 هط) دع ع ممت . 
: م50 -1201821013122 
:م800 : ط6 110 
202 : عطو1داعط 


ملاحظة: يمكنك استخدام القيم الخاصة بالهامش (3112ع221) بالسالب اذا اقتضت الحاجه. جرب ضع قيم بالسالب ولاحظ ماذا يحدث. 


الخلفيات (1205ا0عءاء2ط 655) 


الخلفيات في ال55) الأكثر استخداما. يمكننا استخدام الخلفية كصورة أو لون معين والقدرة على التحكم بمكان الخلفية وثباتها. 
011110-20101رع 721 لتحديد الخلفية ك لون . 

01110-128ع 7261 لتحديد الخلفية ىك صورة. 

05140--0<ناه:عء1ء72 لتحديد مكان الخلفية (توسيط ‏ يمين ‏ اعلى - أسفل .. الخ). 


21 01-1 ناهرعءل72 لتعميم خلفية معينة صغيرة بواسطة تكرارها. واتجاه التكرار (افقي ‏ عمودي ). 
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أداعدسطء 0-22 مدوترعءاءج7 لتحديد ثبات او امكانية تحرك الخلفية عند التصفح. 


سنقوم بعمل خلفية للتطبيق الخاص بنا ونلون خلفية الترويسة والقائمة والمحتوى نحدد لون كخلفية وهي عن طريق وضع كود الخلفية في ال10 
المسمى لدينا 12206 والكلاسات البقية ملف ال1985) كالتالي : 


ع ادق 
2ت2<ام1 4933:ععم عمط 
:71062 
: 26319025 
: #890 : عه10همع-720تنامطدوعاء قط 
1 


ناث 
: ه50 -3122 21820 
2ت2تم1 #4933:مععملعمط 
:711-062 
:م : عطودعطظ 
( #47585 :ع2ه1مع-720ناه 2 وعاء قط 


5م1 24933 :2062 0ط عع ع ممت . 
: 502 -1018101122 
:111062 
: عطو1دعطظ 
(إنع4525 :10م -لصتاه ع وعاء قط 


ذذة ذم نم يم نن زن 


إزى © آدث ٠‏ 5 كن 


لاحظ في السطور ١5‏ و 74 و "١‏ في الكلاسات تم استخدام كود الخلفية الخاص بالألوان واخترنا قيمة لون محدد. شاهد النتيجة وتطبيقها بعد الحفظ: 


هنا القائمة| 


هنا محتوى الموكم] 


نقوم الان بوضع خلفية للترويسة بواسطة صورة بحيث تكون مقاسات الصورة نفس مقاسات الترويسة الطول ٠٠١‏ بكسل العرض ٠٠١‏ بكسل. 


نقوم من خلال برنامج الفوتوشوب بعمل الصورة اللازمة بأي لون واي شكل. معنا الترويسة التالية: 


1 


دورة المواقع والإعلام الإلكتروني 
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نقوم بعمل مجلد خاص بالصور داخل ملف العمل ال055) ونسميه وع22ؤ يصبح لدينا الملفات التالية: 


دىع,ع ابزا5 م اممغطعع مما 5 
أمع7اناء 00 غععا5 عابوذ ومالوعدووةه : مع تصناعه0 ااا عصميطة © 0 3 
طخ كع زط 606 1 


كعبط 495 


نحفظ الصورة التي تم تصميمها بصيغة عم( ونضعها في مجلد الصور الذي قمنا بإنشائه. بعدها نقوم بعمل الكود الخاص بخلفية الصورة وهو 
ع12181:011101-11138 عند عمل هذا الكود مع النقطتين ستشاهد خيار يعطيه لك برنامج ال:وع:1(1:6312586927 كما في الصورة: 


1ع عط 
525ت25تم1 #4933 :عم عمط 
:21062 
:2 : 2610125 
: ©2011120-171266 و1 3ط 


...عوامر8 هه ) 
امعطم © 
700 2 1061221 . 


مه 
1110080 + ويروق ب ورمع ص د وهم 
2ت2تم1 #4933:ععملعمط 


من الخيارات نختار ©71:0775 ونذهب لمكان الصورة التي صممناها ونختارها وسيقوم البرنامج بوضع الكود امامك كما في الصورة التالية: 


المجاء اولان 
5:م1 #4933 :مع لعمط 
+ :71062 
:2631025 
: (329 . 17265/17212621 ) 1121 : ©201120-171326دوعاء قط 
1 


في السطر ١5‏ اخترنا الصورة والتي اسمها ع[ؤ.121286©1 والموجودة في مجلد و28 ويرمز ال1تون الى الرابط الخاص بمكان الصورة كما هو اعلاه. 
نقوم بعمل خلفية من نوع آخر. حسب التصميم التالي: 
أ 
01 
ٌ 
أ 


ومزضع وقمما 


ومز لك وقمما 


لاحظ الصورة عمز.1513562 العرض 7١‏ بكسل الطول ٠٠١‏ بكسل سنقوم بعملها كخلفية للموقع (الترويسة) نقوم بالتجربة أولا ونرى كيف ستظهر. 
وحسب الكود التالي: 


المسجاء ادل 
2تك2ام1 #4933:عم عوط 
:711052 
:26190215 
: (329 . 1706571712622 ) 1121 : 3171296 -20ناه وعاء هط 
3 


من خلال الكود السابق ستظهر النتيجة التالية. 
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هنا القائمةأ 


هنا محتوى الموقع] 


من خلال الكود السابق يمكن تحديد تكرار الخلفية سواء بشكل أفقي (0:) او عمودي (لآ).لو قمت الان بتوسيع مقاسات الترويسة الطول والعرض 
ستظهر الخلفية بشكل كامل ويتم تكرارها افقي وعمودي عند عدم تقييدها بكود معين. 


سنقوم الان بعمل الكود المناسب لهذه الخلفية حسب التالي: 


4 عد 
2جت2م1 4933:عم عمط 
:2005 : 7106 
:2 : 25و 5621ظ 
: (323 . 1712622 / 17165 ) 1121 : ©1733 -112201م2 ولاح قط 
: -2626315 : 262631 -112101 231020 


في السطر١١‏ خاصية تكرار الخلفية حددنا اتجاه التكرار بشكل أفقي فقط. للتأكد قم بتعديل الطول قبل وبعد التعديل من ٠٠١‏ الى ٠٠١‏ بكسل ولاحظ. 
نقوم بإرجاع الخلفية السابقة عمرز.1ع1:128 . 


خاصية (00120-005101011رعءاء2) في حال لديك خلفية لموقع صغيرة مثلا يمكنك اختيار هذه الخاصية وجعل الخلفية تتوسط الصفحة بإمكانك أيضا 
وضعها في اسفل واعلى الموقع. جرب ذلك. 


خاصية (1:00120-246212©21ع1212) تعمل على تثبيت الخلفية لل70013 لتعطي نوع من الشكل الثابت للخلفية العامة بحيث اذا حركت الموقع الى 
اسفل او على يتحرك ال019 العام للموقع تضل خلفية ال20013 ثابته. ويمكنك اعطاء القيمة 110 لها. جرب ذلك ايضا. 
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طريقة أخرى لعمل الخلفية والصورة التي قمنا بعملها للترويسة. والطريقة كالتالي: 


-١‏ نقوم بعمل خلفية للون الذي صممنا منه الصورة ونجعله للترويسة. 
؟"- نصمم شعار واسم الموقع في صورة صغيرة خلفيتها نفس خلفية الترويسة او نجعلها شفافة. 


*- نضع صورة الصورة داخل ال419 الخاص بالترويسة وننشئ لها كلاس لتحديد مكانها إن لزم الأمر. 


لاحظ الصورة التي صممناها وسميناها ع مز.1080 ووضعناها في مجلد الوع دز 


أ 
| إتتك كم 
ومزهوها ومز2ع وهمما وملك وهمما 


كع ياو 8 
ممغاءىء0 !1 
كممهاوييه0 ل[ 
ععع واه غمععع8 15 
عا نانوا5 :2 


كعأرومطنا 2 
دممم نك 

كمع ناء 00 ع 
ع أكناا/اا الع 
كعنقعزم | 

| 


سنقوم بوضع الصورة داخل ال019 الخاص بالترويسة ونحذف كلمة (هنا ترويسة الموقع) .ونقوم ايضا بحذف كود الخلفية الخاص بالصورة نستبدله 


بخلفية اللون كما في الكود: 


<"2232"-1355 01> 12 
13 
<"2ع20ع528">-10 01> 14 


</ :"350 . 10560 /125ة "52 17> 25 


في السطر ١١‏ وضعنا صورة الشعار. 


ت2ت2تم1 #4933:ععلعمط 


: 4229900 :2ه 1ه0ع-20ناه دوعلا 2ط 
22 1201122-205315310123 2319 
: 2ع نقتطه 2011204-3553 23190 


في السطر ١5‏ وضعنا خلفية اللون» وستكون النتيجة بالشكل التالي: 


1001 


16 > 015< 


4 عط 


:71052 
:2 : 25و 5261 


دورة المواقع والإعلام الإلكتروني 


هنا 0 


هنا محتوى الموقع| 


لاحظ الصورة ذهبت لليسار. يمكننا إضافة خاصية معينة لل019 الخاص بالترويسة وهي خاصية اتجاه المحتوى وان يبدأ من اليمين لليسار بواسطة 


الخاصية 011:10 نقوم بوضعها في ال0 الخاص بالترويسة شاهد الكود التالي: 
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4 عط 
2*<م1 #4933:ععملعمط 
:02 : 11062 
: 25و 1ع52آ 
: 4229900 :2ه 1هم-70تناه 2 وعا قط 
:ع2 :11220-2053153102 2319020 
226 : 6215 قاتطه 3106201120-35153ظ 
:21 :03126563102 
1 


في السطر ١5‏ اضفنا الخاصية 0112010 وحددنا القيمة 1 وتعني من اليمين الى الشمال. وهذه الخاصية مهمه جدا نظرا لأن المواقع باللغة العربية 
تستخدم هذه الخاصية لمحتوياتها سواء للنص او الصور او اتجاه اي عناصر داخل الموقع. بعد التعديل والحفظ سيظهر الموقع بالشكل التالي: 


71 


دورة المواقع والإعلام الإلكتروني 


١ هنا‎ 


هنا محتوى الموقع] 


ملاحظة: استخدمنا طريقة الصورة والخلفية لجعل محتوى الموقع اقل حجما وان لا يكون الموقع مليء بالخلفيات والصور التي تؤثر على سرعة 
التصفح للموقع. 


خاصية زوايا الحدود (12011015-"0101 55)) 
من خلال هذه الخاصية يمكنك التحكم بزوايا ال019) وجعل زواياه اكثر مرونة وتحويلها من زوايا حادة الى زوايا ملتوية باستخدام الكود -6501:067 
135+ والقيم الخاصة بها بالبيكسل. سنقوم بتطبيقها على الترويسة وجعل الزوايا الاربع ملتوية بمقدار © بكسل. شاهد الكود ثم النتيجة: 


4ط 
25تم1 4933:ععم عمط 
:771062 
:2619025 
: 4229900 : 0-0102 تتتاهط وعاء 2ط 
:262 :013 1220-205311531نا م2 ع1 23 
222 : 215 قط 53 2011210-35 و1 23 
:011212 
:2 52325 523 523 : 062-25203115ع02ظ 
/ 


من خلال الكود اعلاه سطر ٠١‏ تم عمل الكود وحددنا مقدار حدة الزوايا او التوائها بالترتيب الاولى للزاوية اليسار العلوية الثانية للزاوية اليمنى العلوية 
الثالثة للزاوية السفلى في اليمين. بطريقة أخرى حسب اتجاه عقارب الساعة والبداية من أعلى اليسار. 


عند الحفظ والتطبيق سيظهر لدينا بالشكل التالي: 
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16 


دورة المواقع والإعلام الإلكتروني 


هنا القائمة 


هنا محتوى الموقعأ 


شاهد أعلاه تم تعديل الزوايا وتحويلها من زوايا حاده الى زوايا ملتوية بمقدار © بيكسل. قم بتغيير القيم وجرب بنفسك. حاول ان تجعل الزاويتين 
العلويتين غير حادتين والسفليتين حادتين. يمكنك استخدام الصفر ايضا صفر بيكسل. 


خصائص النصوص (دع1"6ء م20 اناء 1 55)) 
سنستعرض أهم خصائص النصوص المهمة دفعة واحد وهي من أهم الخصائص التي تقوم بعمل تنسيق وتلوين النصوص حسب ما يراه المصمم أو 
مدير الموقع. 


قبل البدء بخواص النصوص .سنقوم بتطبيق خصائص النصوص على محتوى الموقع للتطبيق الذي نعمل عليه نضع صندوقين او " 0119 داخل صندوق 
أو نل المحتوى في الموقع ونضع لهما خصائص من حيث المقاسات والحدود كما تعلمنا. نضع الصورة على الصندوق الأيسر والصندوق الأيمن 
للنص. سنضيف كلاسين واحد لليمين وواحد لليسار كي نحدد خصائص كل واحد من منها. 


نبدأ بعمل الكلاسين داخل ملف ال55) الكلاس الخاص بال018 الايسر نسميه 019ع1028. والذي سيحوي الصورة ونسمي الكلاس الذي سيتحكم 
بخصائص ال019) الذي سيحوي النص 26ع6. والتسميات هنا حسب ما تريد المهم ان لا تختار اسم محجوز مثل 112,522 أو 07 اقىم. 


سيكون شكل الكلاسات كالتالي: 


36 0-74 


38 2.01 


كما تلاحظ في السطرين "" و8” تم عمل الكلاسات وكما تراهما فارغين. نقوم الان بعمل ؟ 019 داخل ال019 الخاص بمحتوى الموقع كما اتفقنا مسبقا 
في ملف 12016.11 وسيكون الكود كالتالي: 


<015/> هتا القائهة <" 1355-21 035> 


<"26ع 2 زمه "1355-7 01> 
<"طجزء "1355-7 017> 
هنا ستكون الصورة 

>/ 015< 

>01 1355-7"3116017”"< 


هم فم يم نزم نم نم يم يم يم 


8 
9 
0 
1 
2 
3 
4 
- 
6 


كن كن ' 
3 
4 
- 
7 
5 
4 
١‏ 


في السطر ٠١‏ بداية الصندوق او ال019 الذي يحتوي الصندوقين الخاصين بالصورة والنص. ونهايته في سطر 8١.في‏ السطر ١١‏ عملنا صندوق أو 
17 النص واعطيناه الكلاس الخاص به الذي سيحتوى على خصائصه وأغلقناه في سطر 77.في السطر 74 أنشأنا صندوق او 019)الصورة واعطيناه 
الكلاس الخاص به وأغلقناه في سطر 5" .سيكون الشكل كالتالي: 
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سنقوم الان بوضع خواص لل١‏ 0197 الخاصين بالصورة والنص. سنضع الخواص والقيم التالية: 


- نحدد عرض ال0195 الخاص بالصورة ٠٠٠‏ بيكسل. 
- نحدد العرض الخاص بال النص 58٠١‏ بيكسل. 
- نحدد الحدود الخاصة بالصندوقين وتحديد لون معين. 


بعد تنفيذ ما سبق سيكون الكود في ملف ال 2055 بالشكل التالي. 


004 
:71062 
:0 55114 عنم1 :ععلوعمط 
3 


اوححة 
:71062 
0 530114 نم1 : عملقعمط 
زوع :نعهه1ع 


1 


في السطر 5” أنشأنا كلاس خاص بصندوق أو 019 الصورة وخصصنا له بعض الخصائص وهي : 

السطر 1" وحددنا في العرض ١5١‏ بكسل. 

السطر 8" وحددنا فيه الحواف او اطراف ال015 من حيث السمك ١‏ بكسل ونوع الحواف خط عادي واللون كما هو محدد اعلاه (41"00). 
في السطر ١‏ ؛ انشأنا 035 النص واسميناه 6زم وحددنا فيه خصائص الصندوق الخاص بالنص واعطينا الخصائص التالية: 

العرض وحددناه 58٠١‏ بكسل. 

الحواف كما في صندوق الصورة. 

وحددنا خاصية المكان (1026) وحددنا يمين (116ع11) والهدف منه جعل الديف في نفس السطر بجانب الديف الخاص بالصورة على اليمين. 


وسيكون الكود في ملف الرردام كالتالي: 
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>/ 03< 


<037ه0ط> 0 
<"”2812"-1355ه 03> 12 
13 
<"ععنوع 3130-1 03> 14 
</ :"320 . 1765/10960 "52-2 1210 > | إداكه 
<03 > 16 
<*01/> هتنا القائمة <"ناطعم"-1355ه 17> | "٠-١‏ 
| كه 
<" ع6 2ه 183595-17 039> 20 
ح"ناعنه 6 "3-27 5ق 1د 03> 21 
هتا سيكون التص 22 
23 
<013 /ل> 24 
<"317160417"-1355 01> جد 
هتا ستكون الصورة 26 
<01 > 2 
<01 /> 2 
3 
3 


م قات نر يم 


<خمقمط/ > 


بعد تنفيذ الأكواد السابقة سيكون شكل الموقع كما في الصورة التالية: 


1 


دورة المواقع والإعلام الإلكتروني 
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نأتي لعمل النص وخصائصه. نقوم بعمل 17117 خاص بالعنوان داخل الديف الخاص بالنص وديف آخر بتفاصيل العنوان نفسه ونقوم بعمل كلاسين كلاس 
يخص العنوان وكلاس يخص التفاصيل ونضع لهما التسمية المناسبة : 


بداية نقوم بعمل كلاسين للنص والتفاصيل في ملف ال ووح.ع691 كالتالي : 


.222164( 


. 641 


كما تشاهد أعلاه تم عمل كلاس (©1)1)) ويخص العنوان وكلاس (0648119) ويخص التفاصيل. نقوم الان بعمل الديف الخاص بالعنوان والديف الخاص 
بالنص وربطهما بالكلاسين أعلاه في ملف [ررغط.16):زز. كما في الصورة التالي: 


ات نام يم نن شر كن 8١‏ ل 66 هضاا ات صر 


نع 


<" 0256226 "1355-7 03> 
<"انجتدع 139595-72 03> 


<017/>هتا العتوان<"651516"-1355ه- 01> 
<017/>هتا التقاصيل الخاصة يالعتوان<"06532115"-1355 0137> 


> 01 < 
>01 1355-"317160177"< 


هتنا ستكون انلصورة| 


زكن إكن كن أكن (كن اكن (كي كن أكن أكيا 0 


>/ 03< 
> 03< 


من خلال ما سبق نلاحظ أننا أنشئنا 017 خاص بالعنوان وأعطيناه او ربطناه بكلاس (©41)) وأنشأنا ديف التفاصيل أعطيناه كلاس (1668119). نقوم 
الآن بعمل عنوان مناسب كتجربة بالإضافة الى تفاصيل أخرى كبيانات افتراضية كما في الصورة التالية: 


<017/,>جزيرة سقطرى جهمال الطبيعة والسياحة - اليمن<"618512"-1355ه 017> 
<"0853115"-1355ه 01> 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمني مكون 
من أريع حزَر على المحيط الهندي قبانة سواحل انقرن الأقريقي 350كم 
جتوب شبه الجزيرة العربيية[1]. إن اتعزال النجزيرة الطويل عن أقريقيا 
وشيه الجرّيرة العريية قد خلف مستوى قريد 
وغير مأنلوق من الاستيطان الحيوي على الجزيرةء وكذلك قي المستوى الاجتماعي لسكان الجزيرة 


> 01 < 


> 017< 


كما تلاحظ أعلاه اضفنا عنوان وتفاصيل وستكون النتيجة في المتصفح كالتالي: 


١/1081: 009677 0 5700000‏ 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليه 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هي أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبا 
سواحل القرن الأفريقي 350كم جنوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه الجزير 
العربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى الاجتماعي لسكاز 


أصبح لدينا عنوان وتفاصيل ضمن الصفحة ونأتي لتعلم الخصائص الخاصة بالنصوص والعناوين. 


خاصية الاتجاه («م1اءعع011) 

من التطبيق الخاص بنا نشاهد ان العنوان والنص بدأ اتجاهه من اليسار ومن هنا يأتي دور خاصية الاتجاه 0162410 لتحديد اتجاه النصوص نقوم 
بعمل الخاصية لنص أعلاه وبإمكاننا وضع الخاصية في عدة ديفات حسب الحاجة هنا نضع الخاصية في كلاس الديف الخاص بالنص (6©56)) ونختار 
القيمة :7181 والتي تعني اتجاه النص من اليمين الى اليسار كما في الصورة: 


اتفحتة 
:585605 : 71106 
:0 50114 غعتم1 :عع عمط 
:21036 
:2م 1ع ه0128 
امعطم © 
ذا © 9 


كه 
غ0قا 0م110 + 4ع 1عقع. 


.6621154( 


كما تلاحظ أعلاه هناك عدة قيم لخاصية الاتجاه وما يهمنا هنا هي القيمتين (:14) وتعني من اليسار إلى اليمين والقيمة (1) وتعني من اليمين إلى 
اليسار وهي الاكثر استخداما في المواقع العربية. نقوم باختيار القيمة 71 .وستكون النتيجة بعد الحفظ كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

3 ى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي قبالة 
احل القرن الأقريقي 350كم جنوب شدبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وبه الجزيرة 

لعربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك في المستوى الاجتماعي لسكان 

لجزيرة 


1 0 /00967 :عا اانا 
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من الصورة أعلاه نرى أن النص مع العنوان اتجه إلى اليمين إلى اليسار. نقوم الان بإضافة خاصيات أخرى لجعل العنوان والنص يبدوان بالشكل 
المطلوب. 


خاصية الإزاحة (عوه52001) 
هي خاصية هامة بالنسبة للنصوص وتعمل على عمل مسافة بين المحتوى (النص) وأطراف الديف الذي يكون فيه النص نفسه لاحظ الشكل للتوضيح: 


00لا لاعلا 


باعتبار ان الديف الخاص بالنص يحمل اللون الرمادي وان النص في الديف يجب ان تكون بينه وبين اطراف الديف مسافة كما هو موضح باللون 
الاصفر هذا مانعني بع 720010 . 


نقوم بتطبيق الخاصية على الديف الخاص بالعنوان والديف الخاص بالنص وعمل مسافة من الأعلى واليمين والاسفل واليسار. وبوضع الخاصية في 
ملف الووح.ع56716 سيكون بالشكل التالي: 


1 إن 

:2 3م32 م3 31 : 2300329 50 
1 51 

52 

53 . 2 4 

م3 م3 م3 : 2300329 54 
1 55 


كما تلاحظ أعلاه أعطينا قيمة ” بيكسل للنصوص (العنوان - التفاصيل ) في الكلاسات الخاصة بهم. ويمكن تعديل القيمة بحسب الحاجة بعد الحفظ نلاحظ 
التغيير التالي بالنسبة للمسافة بين جوانب النصوص: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأقريقي 350كم جتوب تبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وتّبه الجزيرة 
العربية قد خلّف مستوى فريد وغير مألوق من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى الاجتماعي لسكان 
الجزيرة 
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خاصية ( اللون - الحجم - اسم الخط - أخرى ) 


سنضع هنا خصائص عدة مجتمعة كوني أراها خواص مجتمعة دائما : 


- خاصية ال010» : تحدد هذه الخاصية لون الخط ويعطى كود أو اسم اللون كما تعلمنا مسبقا. 

- خاصية ع:زه-]200 : من خلالها نعطي قيمة لحجم النص سواء بالبكسل أو النسبة. 

- خاصية اسم الخط 011-6119 : ومن هنا نحدد اسم الخط المناسب للنص. 

- خاصية سمك الخط )«1ع0214-7761/ : من هذه الخاصية نحدد سمك الخط سواء وتأخذ قيمة سواء نحيف او متين او نحدد قيمة بالبكسل ايضا. 


نقوم بعمل الخواص السابقة كاملة وتطبيقها على العنوان ونضع الكود في كلاس العنوان (©101)) في ملف وو56716.0 كما في الصورة التالية: 


264 . 
3232 م3 غ323 : 23200329 
:#560 :عمل1هم» 
: 5621 ,1317625 ,"32 ه28 تاه21 13172165" : 1177 ققتة ع -12025 
: 12025-51326 
025 120525-11 


لاحظ في الكود أعلاه وضعنا خصائص كلاس العنوان في السطر 5١‏ تم عمل خاصية اللون وحددنا الكود للون المراد عمله. في السطر 57 حددنا اسم 
الخط الذي نريده والمعروف ب0212:12ح1 71619 2265ؤ1 في حالة عدم وجود هذا الخط سيقوم بتعيين الخط الذي بعد الفاصلة وهكذا. في السطر ده 
حددنا خاصية حجم النص وعينا القيمة ١١‏ بكسل. في السطر 4ه استخدمنا خاصية سمك الخط وحددنا 7010 وهي قيمة لتعريض النص وهناك قيم 
أخرى مثل :و[داعء أو ح11[ج1 يمكنك تجريب القيم للخصائص السابقة. 

بعد التطبيق والحفظ للتغييرات ستظهر لنا النتيجة التالية : 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وسبه الجزيرة 


خاصية الظل 5120011 ازع] ) 


إمكانية إضافة ميزات أخرى للنص ومنها الظل ويمكن إضافتها بالخاصية 4-512001::) وسنضيفها في التطبيق السابق كالتالي : 


ظر ار) ا 
م 


4 
:2 32322 م3 م3 : 23200329 
:#4860 :عم1مك» 
:6212 ,1317625 ,"قطقنده8 ه11 13172265" :117 1متة 2 -12026 
:2 : 26 120225-51 
3025 120225-16 
:2 عتص0 2000 :20017 طد- ععرع جع 
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الى كن 


0 
1 
2 
3 
4 
5 
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كل كص كن 


كما في الكود أعلاه أعطينا كلاس العنوان خاصية الظل في السطر 5ه أعطينا اللون للظل وهو بالرمز السابق (اللون الاسود) والقيمة الاولى صفر 
بكسل للظل عموديا و” بكسل للظل بالاتجاه الافقي. 
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بعد التطبيق والحفظ للتغيرات ستكون النتيجة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب شدبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه الجزيرة 
العربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى الاجتماعي لسكان 
الجزيرة 


ننتقل لعمل الخواص المناسبة للتفاصيل في كلاس (161421[19) في ملف ووح.ع91 كالتالي: 


2١ 


+ 2115 . 
3232 م3 +323 : 2300326 
: 53315-5621 ,5626573 ,1320118 : 117 1متتة 2 -120215 
: 12025-513126 
/ 


تن ف 


5 
6 
6 


ةث شر نم 


يفا 


كما في الكود اعلاه في السطر 55 خاصية المسافة بين النص والديف أو المحتوى واطراف الصندوق وحددنا لجميع الاتجاهات مسافة بمقدار “بكسل. 
في السطر ٠١‏ وضعنا خاصية اسم الخط او نوعه وحددنا (210132)) وهو اكثر الخطوط شهرة وتوفر في جميع المتصفحات. في السطر "١‏ تم تعيين 
حجم الخط وتحديد ١١‏ بكسل. 


وبعد التطبيق والحفظ ستكون النتيجة كالتالي: 


16 


دورة المواقع والإعلام الإلكتروني 


9 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء اء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أ أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم, جنوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة 


00 0 00967 :عا |8 0لا 
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خصائص الصورة 


ننتقل لعمل خصائص مناسبة للصورة في الصفحة التي نطبق عليها ونحدد القيم المناسبة للخواص التي سنستخدمها. في البداية نختار الصورة المناسبة 
ونضعها في مجلد خاص ونسميه مثلا: عد ضمن المجلدات الخاصة بالتطبيق كما في الصورة. 


اجمغطمع ما © ع 2 ود .7 
نا 00 ااا ل عتصمعيطة : : 
6 136 ؟علاه؟ عا 53 ععلام؟ عاط : 


ككعء.عالادت لتك 
اط 


مع تضناء 00 أعع اذ عابوذ ومالوءدوة) 
8 1.01 


لدينا صورة واسمها (8م.76261) وضعناها في المجلد 1018 . ننتقل الان الى الديف الخاص بالصورة ونضع كود الصورة. كما في الشكل التالي: 


<3171601"-1355 01> 
</ "326 . 761621 /روسة "تع 5 1216 > 
< 01 /> 


في السطر 7” أضفنا كود الصورة وحددنا مكانها من المجلد الذي انشأناه والصورة التي نريد وضعها. وبعد التطبيق والحفظ ستكون النتيجة كما في 
الشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال 
سقطرى وتكتب أيضا سقطراء أو سه 
قبالة سواحل القرن الأفريقى 5350م < 
الحزيرة العربية قد خلف مستوى فريد و: 
الاجتماعى. لسكان الجزيرة 


نلاحظ كما في الشكل أعلاه أن الصورة تم ظهورها بشكل طبيعي ولأن الصورة تحمل حجم ومقاسات معينه لابه من وضع خصائص للصورة ضمن الديف 
التي تحويه علما أن الديف التي فيه الصورة لا يتدخل نهائيا في حجمها. والمطلوب عمله الان وضع كلاس معين خاص بالصورة نضع فيه المقاسات 
والخصائص التي نريدها. 
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نقوم الان بعمل كلاس للصورة في ملف 5916.059 ونسميه مثلا 18181 . ونضع فيه خاصية المقاسات أولا وسيكون بالشكل التالي : 


17261 . 
:5 : 52610215 
( :2م190 :نطع 10 


كما في الكود أعلاه حددنا الطول ٠١١‏ بكسل والعرض ١1١‏ بكسل ويمكنك عمل المقاسات التي تريدها. لكن هنا ملاحظة مستقبلا يمكنك عمل قيمة 
0 للطول لتظهر الصورة بشكلها الطبيعي وان لا تكون ممطوطة حسب مقاس معين. 


نأتي الان لربط الكلاس بالصورة في ملف 106::.031 كما في الشكل التالي: 


<"77 12355-73171601 01> 
</ "133535-31 "20 . 21 عتتء را /1دة "ح2 53 010 > 
<013 /> 


لك 


3 
3 
38 
559 
4 
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كما تلاحظ في السطر 7” تم ربط الصورة بالكلاس الخاص بها (18251). بعد التطبيق والحفظ للتغييرات سيكون لدينا الشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الحزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فزيد وغير مألهف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الحزيرة 


خاصية حدة الحواف (1-20115ع5010) 
كما تلاحظ الصورة ظهرت زواياها حادة ولأكثر تنسيقا ومظهرا نقوم بعمل تحديد لزوايا الصورة وجعلها ملتوية نوعا ما. نقوم بعمل الكود التالي: 


ين 


17361 . 
:2 :2621025 
:2 :71062 
:2 62322 م6 622 : 202062-232013115 
( :م25 م6 :م2 2022 : 10312012 


6١ 5 
له‎ 60 


0 


9 
0 


6 
كَ 


لاحظ في السطر 58 ثمنا بعمل خاصية الحواف وحددنا مقدار التواء الزوايا " بكسل لجميع الزوايا. في السطر 55 اضفنا كود لعمل ازاحة او بعد 
للصورة من كما في الشكل اعلاه من الاعلى ؟ بكسل اليمين ؟ بكسل الاسفل 5 بكسل اليسار ؟ بكسل. 
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وقبل رؤية شكل الصفحة سنضيف بعض الاكواد في الديف الخاص بالصورة والديف الخاص بالنص كما في الشكل التالي : 


030274 
71062 : 
201210312 : 203+ 223+ 6232 2: 
1 


01 
:5 :71062 
:4560 501134 م1 :ععلعمط 
:2182 :121038 
:21 : 036213013 
+25 :م2 :م4 :م8 : 2132032 


لاحظ في السطر 4” اضفنا خاصية «رؤع21 وهي خاصية كما ذكرنا سابقا تساعد على عمل ازاحة للديف او الصور لأي اتجاه نحدده وهنا حددنا ازاحة 
للديف او الصندوق الذي يحوي الصورة من أعلى بمقدار ١‏ بكسل ومن اليمين بمقدار ؟ بكسل ومن الاسفل بمقدار 5 بكسل ومن اليسار ؟ بكسل. 


في السطر 417 وضعنا خاصية الازاحة للديف التابع للنص كامل وبقيم مختلفة كما تلاحظ. بعد التطبيق والحفظ سيكون الموقع بالشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكنب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى 
الاجتماعى. لسكان الحزيرة 


كما تلاحظ الشكل الناتج من التعديلات والاكواد المضافة يمكنك التعديل في القيم ورؤية الفرق وكيفية نتائجها. إضافة رابط ضمن النص وخصائصه : 
يمكننا إضافة رابط ضمن النص له خواصه المعينة نقوم بعمل رابط (تفاصل أكثر ..) ضمن النص او آخره كما في الشكل التالي : 
وغير فنأالفوع فَنَ الاستيطان الحيوي على الجزيرةء وكدلنك قي المستوى الاجدماعي لنسكان العزمرة 


<3/>.. تقاصيل أكثر<"#"-2عطط ج> 
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2 
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ذن) ن) ن) ذر) زب) ن 


كما تلاحظ أعلاه أضفنا رابط في نهاية النص لقراءة المزيد حول الموضوع ولم نحدد الاتجاه بعد فقط موقتا وضعنا علمة هاش (#) في الرابط وسيكون 
شكله في التطبيق كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


وتكتب أيضا سقطراء ء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من / أربع جزر على المحيط الهندي 


الاجتماعى لسكان الجزيرة تفاصا . اكثز.. 


لاحظ وجود الرابط في نهاية النص (تفاصيل أكثر..) ظهر الرابط باللون الازرق وهو اللون الافتراضي للروابط. نرد أن نضع بعض الميزات للرابط 
ومنها: عند وضع مؤشر الفأرة يتم تحول اللون من الازرق الى الأحمر أيضا نريد التعرف على خاصية ازالة الخط من اسفل الرابط في حالة اردنا ذلك او 
انه يبقى في وضعه العادي ويختفي عند التأشير والعكس. 


الطريقة : طبعا هنا لا نقوم بعمل كلاس جديد للرابط ولكن نقوم بإضافة كلاس فرعي لكلاس التفاصيل وهنا تأتي حرفية ودقة لغة ال55) ويعني ان نقوم 
بعمل كود يخبر المتصفح بأن يقوم بعمل لون محدد لرابط داخل الكلاس الفلاني. 


لاحظ أن الرابط موجود داخل الديف (1662115) لذلك الكلاس الذي سننشئه سيكون متفرع من هذا الديف. في البداية نقوم بعمل لون محدد للرابط وليكن 
الاصفر او أي لون كمثال سيكون الكود كالشكل التالي: 
4 0658115. 


:#295 :مم01 
(20226: 2ه 31م 5625-06 


لاحظ أعلاه اخذنا اسم الكلاس (0642315) ثم وضعنا اسم الرابط (8) وهو اسم عام لأي رابط في اي كلاس. وتعني تعبيريا الروابط التي في الكلاس 
25 في السطر 77 قمنا بتحديد لون معين لأي رابط داخل الديف أعلاه. في السطر 74 اضفنا خاصية جديدة وهي خاصية الخطوط التي تحت 
الروابط 626-06012010 وتعني الخط تحت النص او الرابط وأعطيناها القيمة ©2026 والتي تعني لاء والتي تعني لا تضع خط تحت الرابط وسيكون 
الشكل بعد التطبيق والحفظ كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوىك 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


كما لاحظت أعلاه رابط (تفاصيل أكثر..) تم تغيير لونه بالإضافة الى ازالة الخط الذي كان تحته. ولكن عند التأشير عليه لا يحدث اي شي. سنقوم الان 
بعمل لون محدد واضافة خط تحت الرابط في حالة التأشير على الرابط بالماوس. والحل نقوم بعمل كلاس فرعي آخر بنفس الطريقة السابقة والتي تخبر 
المتصفح بأن اللينك في الديف الفلاني عند التأشير عليه ظهر الخصائص الفلانية والكود سيكون كما بالشكل التالي: 
624 06682115 . 
: #860 :10م 


2622-06 0231532012 : 20621326 : 
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200 0 00967 :081 
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كما تلاحظ أعلاه في السطر 77 اضفنا الكلاس الفرعي 1ع2:1107 ضمن الكلاس 0648119 والتي تعني الروابط في الديف 068119 عند التأشير عليها. 
في السطر 78 أضفنا اللون الذي نريده. في السطر 795 اضفنا خاصية الخط تحت الرابط وهو الظهور للخط وأعطيناه القيمة 0206:1106 وتعني الخط 
السفلي. جرب هناك قيم أخرى مثل :1ع116-01:1:011 وغيرها يمكنك تجربتها خلال برنامج الع 101:6211259625. 


بعد التطبيق والحفظ سيكون الشكل للرابط والتأشير عليه كما في الصورة : 


0 و« 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقى 50م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوى 


الاجتماعى لسكان الجزيرة تفاصا , اكثز.. 


كما تلاحظ أعلاه يتغير اللون عند التأشير على الرابط. 


خاصية التعليق ع2 تنرمء) 


في برمجة المواقع تحتاج أحيانا بعد أو أثناء البرمجة وانشاء المواقع لعمل تعديلات وعودة للاكواد السابقة ومن باب الترتيب والتوثيق يمكنك إضافة 
تعليق ضمن الاكواد تشرح لم هذا الكود أو ذاك دون أن يؤثر على الكود الحقيقي أي أنه لا يحسب كود لأنه تعليق فقط. سنقوم بعمل تعليق كمثال لملف 
لسخط.ععلمز وملف الووع.516 . 


كما في الصورة التالية : 


ل 
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فم هم فم يم زم يم 


فم يم 


أضفنا تعليق ضمن ملف 106.101 والتعليق يضاف ما بين الحواصر أعلاه. 
ايضا الصورة التالية: 
34 0655115. 


:#9 :عم1همك 
( 2 20226: 02 625-0602351 


كما في الصورة اعلاه نضع اي تعليق داخل الحاصرتين أو الرمزين أعلاه بنفس التنسيق وبأي تعليق تريده. 
ملئ صفحة الموقع 


قبل البدء بتطبيق بالخواص التالية سنقوم بمليء الصفحة بنفس النص والصورة الموجودة ( نسخ ولصق ). كما في الصورة التالية: 


١/1081: 009677 0 5000‏ 
ااام أعم.وامحاعء1©م]م1 :اأهمع 2 772755202 2:00967 08118 


<"25ع256م "1355-7 01> 21 
<"ععرعن "1888-5 


<0417/>جزيرة سقطرى حمال الطبيعة والسياحة - 0 "م 0135 


امن أريع جزر على المحيط الهتدي قيالة صواحل القرن الأقريقي كم 
جتوب شبه_الجزيرة_العربية[1]. إن_اتعزال الجزيرة_الطويل_ عن أقريقيا 
وشيه انجزيرة العريية قد خلف مستوى قريد 
الجرّيرةء وكذلك قي المستوى الاجتماعي لسكان الجزيرة 


<2/>.. تقاصيل أكثر<"4"-2ع2ط ها 
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سنقوم بنسخ المحتوى مرتين ليصيح مكرر ” مرات ويمكنك في تطبيقك عمل بيانات أخرى افتراضية وسيصبح الموقع كما في الشكل التالي: 


1 


دورة المواقع والإعلام الإلكتروني 


القان 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكنب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الحزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرك وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمنتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العزبية قد خلف مستوى فربد وغير مالوف من الاستيطان الحيوي على الجزيرة. » وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تقاصيل اكثر.. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتنب أيضا سقطراء أو سقطرة أو سوقطرةء شدى ى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


لاحظ كيف قمنا بنسخ كود معين من بداية الديف الخاص بالنص والصور داخل ديف المحتوى يجب ان تتنبه هنا الى كيفية النسخة ومكان النسخ للديفات 


وعدم إخراج ديف معين عن الديف العام. 
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القوائم (دددء31) 


تعتبر القوائم من أهم العناصر في تكوين المواقع الالكترونية من حيث تصميم الشكل والمحتوى. فالقائمة تعتبر خارطة الموقع بالنسبة للمتصفح وعن 
طريقها يصل المتصفح للموقع لما يريده داخل أي موقع فدائما نركز على تصميم القائمة شكلا ومحتوى. تعلمنا مسبقا كيفية عمل (1150) بمعني قائمة. 
هنا القائمة التي نريد عملها وتعلمها ليست كالتالي تعلمناها مسبقا ولكنها منبثقة منها ومطورة بشكل أكبر. 


مثال للقائمة التي تعلمناها مسبقا: 


>111< 

<3<>/11/>حليي<"4#"-127عطط 11<>3> 
<3<>/11 />ييض<"#"-2عطط 11<>38> 
<3<>/11 />جين<"4#"-28ع2ط 11<>3> 


>/111< 


لاحظ القائمة أعلاه. مشابهة للقائمة السابقة لكن أضفنا لهنا هنا كود الرابط. سنقوم بعمل قائمة جميلة وبمظهر رائع لموقعنا وسنستخدم الكود أعلاه 
لبناء قائمة احترافية. وسنبدأ بالخطوات أول بأولء في البداية ننتقل للديف الخاص بالقائمة (726120) في التطبيق الخاص بنا. 


نقوم بعمل قائمة فيها العناصر (الرئيسية - مشاريعنا - أخبار - مشاركات - المرئيات - حول المؤسسة - اتصل بنا ). وسيكون شكلها كالتالي: 


<"تتطعم-61255 07> 19 

20 >111< 

<3<>/11/> الرئيسية<"4#"-2ع226 11<>8> 2 
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<3<>/11 />مشاريعنا<"#"-2عطط 11<>3> 
<113/><ة /> أخبار<"2<"4عطط 11<>2> 
<3<>/11 />مشاركات<" #"-2عطط 11<>3> 
<3<>/11/> المرئيات<"4#"-72عطط 11<>3> 
<3<>/11/>حول المؤسسة<"#"-2عطط 11<>3> 
<3<>/11/> اتصل يتا <"#"-2عطط 11<>3> 
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قمنا بعمل قائمة في الديف الخاص بها في الموقع. بعد التطبيق والحفظ سيكون شكل المواقع كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هي أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 


كما تشاهد أعلاه تم إضافة القائمة في الجهة اليسرى للديف ومعظم محتوى القائمة ذهب للأسفل. قبل أي تعديل على القائمة وإضافة ميزات لها نقوم أولا 
بعمل (10) للقائمة مشابه للكلاس كي نقوم بعمل جميع الخصائص للقائمة فيه وقد تعلمنا مسبقا ال10 .نقوم بإضافة (0م©2م) من نوع (10) بجانب 
الكلاس (7261211) الذي أنشأناه سابقا سنستخدم الكلاس للخواص العامة وال(10) لخواص القائمة وسيكون بالشكل التالي: 


114 تاصعمدة 
11612213 . 
: م50 -112 1182201 
1 :م1 #4933:ععم ل عمط 
نعم 200 : طع 1ج 
: 25و 1ه52 
( :#7575 :2ه1هح-720تنام2وعاع هقط 
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[كن آكن اكز أكن كنا (كن ركنا 


قمنا بعمل ال(10) الخاص بالقائمة وأسميناه 1:21 وإضافة رمز القائمة (11) المتفرع والتي تعني تعبيريا (القائمة الموجودة في الاي دي الفلاني ) كما 
في السطر ؟١7.سنضيف‏ أيضا خاصية الغاء علامة القائمة او النقطة عند كل عنصر عبر خاصية (1156-56916-6976). وسيكون الكود بالشكل التالي: 


التمتانتع] 22 
( 262 : 6م2170 -6 13515-51563771 23 


كما تلاحظ في سطر "7 أضفنا خاصية نوع الاستايل للقائمة (عمجاءع1 جا 5ز1) واخترنا القيمة 202 والتي تعني لا أي بدون ستايل وسيتم الغاء نقاط 
العناصر للقائمة كما في الصورة التالية: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 


قمالة سوا« . القدث الأقديقه . 0كتكم حتصدث .ه لاحنيدة لاعسية[1!. اث اتهناك لاحنسدة للطصل. عت أقديقءا عث مه 


لاحظ القائمة والنقاط التي كانت عليها تم الغائها. 


ننشأ الان آي دي متفرع من السابق خاص بعناصر القائمة (11) وفيها سنقوم بعمل خاصية جديدة وهي (11501279) وهذه الخاصية تقوم بعمل عرض 
القائمة ولها قيم عده منها أفقية ©::11ؤ والتي سنضيفها الان لعرض القائمة بشكل أفقي. هنا شكل بياني سنستعين به لشرح هذه النقطة الهامة: 


- اللون الأخضر: هذا ليس له دخل بالقائمة وإنما هو صندوق او ديف يحمل أي دي أو كلاس ليستمد منها خصائصه من الوان وخطوط وما إلى 
ذلك وهنا في مثالنا هو نفس الديف الذي كنا كتبنا بداخله في بداية التطبيق (هنا القائمة). 

- اللون الرمادي: هي القائمة نفسها (01) ويمكن التعبير عنها كأنها سلسلة. 

- اللون الأصفر: وهي عناصر القائمة الرمادية ويمكن التعبير عنها بعناصر السلسلة. 


الان سنقوم بعمل الاي دي الذي سيحمل خصائص القائمة كليا الموجودة ضمن الديف الذي يحمل الاي دي 20زعرطر. كما في الكود التالي: 


يم 


4 111 تتمعرة 
( 2026 : ع ملاع -6 1155-5531 
134 111 تتمفدكة 
1 1122:خ3 012132 


ن) شر ل 


ذخ يخ يم 


لاحظ السطر 4 ؟ اضفنا (10) وهي (11) متفرع من الاي دي (11) والاي دي (2©0100). والتي تعني تعبيريا (العناصر في القائمة في الاي دي الفلاني ). 
وبعد التطبيق سيظهر الموقع بالشكل التالي: 


دورة المواقع والإعلام الإلكتروني 
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لاحظ التغيير تم جعل عناصر القائمة أفقيا. نلاحظ أن القائمة أتت من اليسار لذا سنقوم بعمل خاصية الاتجاه للقائمة بأكملها. سنقوم بعمل خاصية الاتجاه 
في كلاس (226211.) كما في الشكل: 


26 . 162213 

: م20 -22 10182031 201 
2ت2تم1 #4933 :ععلعصمط 28 
:002 : طع 110 29 

:2 : طاطودعظ 30 

3 


: 55 : 2 1مع-01120 2و1 3ط 
02:2812 012661 


1 
0 
32 


لاحظ في سطر ؟” ثم إضافة الخاصية 1ر10)ع011:62 لكلاس القائمة وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 


دورة المواقع والإعلام الإلكتروني 


كما تلاحظ تم تغيير اتجاه القائمة من اليمين الى اليسار لأنها ضمن الديف (القائمة) التي يستمد خصائصه من الكلاس (22©1211). 


الخطوة التالية سنقوم بإضافة خواص تعلمناها مسبقا وهي (خاصية مكان الخط (ازالة الخط من اسفل العناصر) - خاصية حجم الخط - خاصية تغيير 
لون الخط لروابط القائمة - تعيين الخط المناسب أيضا وحجمه ). 


ملاحظة (تذكر أن عناصر القائمة هي روابط وقد تعلمنا مسبقا التعامل مع الرابط لتغيير خصائصه عبر كلاس او اي دي متفرع من الديف الذي يحتويه 
وهو ما سنفعله الان في تعيين خصائص عناصر القائمة). 


لاحظ الكود أدناه أو الشكل: 


134 111 لامعترة 

( + 37:12 ش22 

34 131 111 تامعترة 
: 6 023531202 1262125-06 
:#560 :عه10هم» 
:6212 ,1317625 ,"قتقمده8 ه11 1317125" :117 1متة ‏ -0526 2 
: 26 120215-51 
( 010 : 25و 120526-11 
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60 صا 


ذف زن 


هت هم 


في السطر 75 أضفنا الاي دي للروابط المتفرع من عناصر القائمة ضمن المتفرع من القائمة الكلية والمتفرعة من الايدي الاصل او الصندوق نفسه. 


هنا يمكن التعبير بشكل آخر للسطر 5؟ (كأننا نقول امنح الروابط الموجودة في عناصر القائمة للقائمة الكلية في الصندوق او الايدي 2220 الاصل هذه 
الخصائص). 

في السطر 77 خاصية الخط ومكانة وضعنا قيمة »206 والتي تعني بدون خطء في السطر 7١8‏ عينا اللون» في السطر 75 تعيين للخط وحددنا الاسم 
للخط المطلوب؛. في السطر ٠‏ حددنا حجم الخط؛ في السطر "١‏ حددنا عرض الخط واخترنا قيمة 7010 والتي تعني عريض. 


بعد التطبيق والحفظ سيكون شكل الموقع او التطبيق كالتالي: 


دورة المواقع والإعلام الإلكتروني 


الرنيسية مشاريعنا أخيار مشاركات المرئيات حول المؤسسة اتصل يتا 
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كما في الشكل تم عمل التغييرات اللازمة والمحددة مسبقا في الكود. سنقوم الان بتحديد أطراف عناصر القائمة (11) وسنضيف الكود او الخاصية الذي 
تعلمناها سابقا وهو الحواف او الاطراف (01:061) كما في الكود التالي: 


24 131 111 تتصعدة#ة 
: 26 : 0233102 6625-06 
:#560 :عم10هم» 
:1 ,11172625 ,"222ه8 مك121 1312065" :1117قتة2 -12025 
: 26 120225-51 
:025 2025-11 
15:1 50114 #890 بععلعمط 


ززه |3 


2 
5 
2 
5 
2 
3 
3 
5 
3 


7ت ف يق شرم يم 


في السطر ؟7” تم اضافة خاصية الحواف او الاطراف وتم تعيين اللون كما هو اعلاه وحددنا نوعه خط عادي والحجم ١‏ بكسل. بعد التطبيق والحفظ 
سيكون شكل الموقع كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن هه 


لاحظ تم تحديد اطراف عناصر القائمة باللون الذي حددنا. نقوم الان بعمل خاصية اخرى تعلمناها مسبقا وهي المسافة بين الرابط او النص وطرف 
العخصر بواسطة الخاصية (500128م) كما في الكود التالي: 


324 11 111 تتسعمدة#ة 
: 6 : 02353120123 1276252-06 
: #4860 :10م 
: 56821 ,131170685 ,"قنقدنده8 تاهء11 13171265" :117 1حتتة 2025-5 
: 12025-53126 
1202156-61 
:2 50114 4890 :ا ععلعمط 
:72 727 723 723 : 2300326 


0 ل- 


نيم نيم يخ نزخ زر) زب 
© تا © 


1 
2 
3 


ذ) نزي 


في السطر 7" عينا قيم »ابكسل لكل المسافات من جميع الاتجاهات. وسيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


لاحظ القائمة وعناصرها زادت المسافة بين النصر وطرفها الخط الملون باللون الاصفر. ولكن هناك ماهو ملفات ايضا تم ازاحة القائمة الى الاسفل خار- 

م 3 

اطار الديف او صندوق القائمة كما نراه فى ١‏ ة اعلاه وهنا سيتبادر الى اذهاننا بعض التعديلات وهى: ( جعل الطول بالنسبة للديف الذى يحوى 

وق في هي: ( ي يحوي 

القائمة 5؛ بكسل حسب احتياجنا - ايضا عمل مسافة بين القائمة وطرف الديف عموديا وافقيا ). وسيتم تطبيق ذلك في الاي دي للقائمة بالنسبة 
للمسافة بينها وبين الصندوق ككل والطول للصندوق الديف الخاص الذي يحوي القائمة (132611.) كما في الكود التالي: 


يم 
يم 


111 تتطعرة 
: 26 : 1706 -131515-53716 
:2 : م20 -22 201221031 
--:208193112-2101215 
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ةن يخم يم 


: 
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5 


يم 
ززفا 


في السطر ؛ ؟ جعلنا المساقة بين القائمة وبين طرف الصندوق من أعلى يساوي ؟١‏ بكسل. وجعلنا المسافة بين القائمة والجانب الايمن سالب 1 
بكسل وهو العكس طبعا اي ان يقترب من الطرف الايمن بمقدار 7" بكسل كما ستلاحظ الفرق بين النتيجة السابقة واللاحقة. 


لك 


ن) ين 


21162114 . 
: م502 -12022031122 


9 
8 


تغام1 4933:عع عمط 3 
:2 : 71062 4 

:#55 : 12م -0 تناه 2 وع1 قط 41 
:2ه 1ع 0128 42 

:5 :: 25و 5263 43 
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في الكود أعلاه وفي الكلاس 736111 الذي يستمد صندوق القائمة خصائصه منه عدلنا الطول وجعلناه ©؛ بكسل. وبعد التطبيق والحفظ سيكون شكل 
الموقع كالتالي: 


دورة المواقع والإعلام الإنكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقي 350كم جنوب شبه الجزيرة العربية[1], إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الجزيرة وكذلك فى المستوى 
الاجتماعى لسكان الحزيرة تفاصيل اكثر.. 


نقوم بتعديل بسيط على عناصر القائمة على المسافة بين رابط او عنصر القائمة والجانبين الايمن والايسر بدلا من 7 بكسل نضع ١8‏ بكسل. بعد التطبيق 
والحفظ سيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


0 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأقريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوىك : 
الاإصفاعي اسكات الجزازة يفاخيل اكير . امون سو هه 


سنقوم الان بإضافة خاصية أخرى تعلمناها مسبقا وهي تحديد حدة الزوايا وسنقوم بتطبيقها الان على روابط عناصر القائمة بحيث ستبدو زوايا غير 
حادة كما في الكود التالي: 


34 11 111 تاطعتر 
: 6 66215-06023102 
:60 #:ع2م10هم» 
: 56212 ,1172625 ,"2802122 ه11 1317065" :117 1متة 2 -120526 
:5 : 12025-513126 
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سن 
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دن 
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ن) ن) ز) ين 


66 ما 


كما تلاحظ في السطر 8” أضفنا خاصية (115ن0ة- عل “تمط) في الاي دي (2 ذا آنا تتسعحم) لروابط عناصر القائمة بمقدار © بكسل من جميع الزوايا. 
وبعد التطبيق والحفظ سيكون شكل في القائمة في الموقع كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة, هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


لاحظ كيف تحولت روابط العناصر للقائمة الى زوايا ناعمة او ملتوية. سنقوم الان بتعديل لون الخط والخلفية لكل العناصر من نفس الاي دي الذي عدلنا 
عليه أعلاه سنضع لون للخط أبيض وخلفية برتقالية مع تغيير لون الخط الحواف من برتقالي إلى لون مختلف كما في الكود التالي: 


34 11 111 تالمعو 
222 : 02 625-06023251 
: #22 :عملاه0» 
:562312 ,1172685 ,"2802222 ه11 111265" : 117 ةع -6 1202 
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طلر 
من فاه 


كما تلاحظ أعلاه قمنا بتعديل اللون في السطر ؟"”. ولون الحدود أو (601:063) في السطر 5” حسب اللون اعلاه. أيضا أضفنا كود أو خاصية الخلفية 
في السطر 9" وحددنا اللون الذي نريده وسيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة, هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 50م جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


كما تلاحظ أعلاه تم تغيير لون خلفية روابد العناصر للقائمة أعلاه. سنقوم الان بإضافة لون لخلفية القائمة ونقصد هنا الديف (11جاء22) والذي يستمد 
خصائصه من الكلاس (1261111.) كما في الكود التالي: 
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اعاءتا 5 

: م520 -212 2131031 
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كما تلاحظ أعلاه تم إضافة كود الخلفية (101110-20101ع121) وتعني تعيين لون كخلفية. قمنا بتحديد اللون الذي نريده كلاس (122©1211) في السطر 
؛. وسيكون شكل الموقع بعد التعديل والحفظ كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفربقى 350كم جنوب شبه الجزيرة العزبية [1]. إن انعزال الجزيزة الطويل عن أفزيقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


لاحظ بعد كل خطوة نحصل على شكل رائع للقائمة من حيث التنسيق والالوان والشكل ولم ننته بعد. سنقوم الان بإضافة ميزة تعلمناها مسبقا وسنطبها 
الان ايضا ولكن مختلف نوعا ما وهي خاصية تغير اللون عند التأشير بمؤشر الفأرة على أحد عناصر القائمة. وهنا يجب علينا القيام بعمل أي دي آخر 
متفرع من روابط عناصر القائمة كما في الكود التالي: 


01 اادتااض 


24 11 111 تاطعسة 
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لاحظ تفرع الاي دي للأكواد الخاصة بالقائمة وعناصرها وروابطها بشكل سلس ومتتابع. هنا أضفنا في السطر ١‏ الاي دي “اع2:1107 وهو كود ثابت 
يضاف لأي ديف وهنا تعبيريا يمكننا تفسيره ( الروابط في عناصر القائمة الفلانية الموجودة في الاي دي الفلاني الذي هو «جرعدم طبعا). 


وسيكون شكل عناصر القائمة او لونها عند التأشير عليها كما في الشكل . 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطببدة والسياحة - ايم 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


عند التأشير على أي عنصر في القائمة سيظهر اللون الذي حددناه كما في الشكل أعلاه. 


يمكنك عمل خلفية صورة مخرفة أو مصممة باللون الذي يحدده المصمم والذوق الذي يختاره على العناصر في الاي دي 
(2 ذا آنا تتسعحم) أو الاي دي (ئآ آنا تتسعحم) أق (معرمط:2 1[ آنا تتسعحم) أق (لن تتسعحم) أو كلاس (تاصعحم). 


الخلفية الصورة في حالة وضعها نحددها على لون محدد ومقاس محدد وحجم خفيف وان لا تكون صورة كبيرة عن اللازم كي نحافظ على خفة الموقع 
وأن لا يثقل التحميل للموقع عند إطلاقه مستقبلا. 


يمكنك عمل اي خصائص تريدها لروابط العناصر في القائمة سواء الالوان او الظل او غيرها وكل ذلك يعتمد على الابداع والتفكير وليس التقيد بما 


خاصية الحركة (ع1121011) 


لموقع أكثر حرقة وجذاب سنضيف الان خاصية جديدة وهي النص المتحرك للموقع والخطوات كالتالي: 


- عمل ديف بنفس مقاسات الديف للقائمة وكلاس خاص به للخطوط والألوان والخلفيات. 
- إضافة الخاصية ع2121016 والنص الذي سيتحرك في الموقع. 


ويكون شكل الخاصية كالتالي: 


ضة 15 كتط8202)0010-71101<:1 '12111:)110011-1810111 101-50015011 7اخطآكاظ1 171112111-10096 111:1 11410> 
<101011خ]ط/> خطعوكت عطا 0) عستلام*ه5 ععنان"تممم د 01 عامسدى 


لاحظ الكود أعلاه خاص بخاصية النص المتحرك. اللون الأخضر هو للخاصية نفسها والأحمر قيم الخاصية أي نحدد فيها نوع الحركة (“تمتأكقطءط) 
والعرض (71061) واتجاه التحرك (11012ع11) ولون الخلفية (78-0101). اما النص الانجليزي بالأسود هو النص الذي سيتحرك وقد يكون بالعربي 


أو صور أو أي شيء تريد تحريكه داخل ال(ع67221:0116). 


نقوم الان بعمل كلاس للديف الجديد للنص المتحرك بعد ديف القائمة وعمل الديف نفسه وربطه بالكلاس كما في الكود التالي: 


106 .2112 2116© 4 ( 
107 


في السطر ٠١5‏ كما تلاحظ أعلاه عملنا كلاس وسميناه 229101166 ونقوم الان بعمل الديف وربطه به كما في الكود التالي: 
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نقوم الان بإضافة الخاصية داخل الديف وبعض القيم كما في الكود التالي: 


<"ع222116"-1355 03> زفك 
<01515ا0ظه1!1/> دورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني<56 290010221 01265102119025 562377101252011 171065-1005 كناو ههقلا> ١|‏ ان 
<تن /> 32 


في السطر "١‏ أضفنا ديف وربطناه بالكلاس الخاص به .في السطر ”١‏ وضعنا خاصية النص المتحرك (2121:01166) أضفنها لها خصائص العرض 
٠‏ السلوك وحددنا سكرول اي تحرك بخط مستقيم الاتجاه ايضا وحددنا يمين ثم كتبنا النص ثم أغلقنا الخاصية. 


سيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


دورة المواقع والإعلام الإلكتروني 


دورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


مايه متع راسد - 


سقطدى وتكتب أنضا سقطراء أو سقطرة أو سوقطرة: هى أرخسا, يمتى مكون من أربع جزر على , المخبط الهتدى 
كما تلاحظ سيكون لدينا نص متحرك في الموقع. وسنقوم الان بعمل بعض التعديلات لشكل أكثر تنسيقا من خلال الديف الذي توجد فيه خاصية 
ال2231:1166 من خلال الكلاس الخاص به الذي انشأنها وسنقوم بإضافة التالي: 


- لون النص والخط والعرض. 
- طول الديف وعرضه. 
- الحواف او الاطراق تحديدها بلون معين بالإضافة الى زوايا ملتوية. 


نأتي للتطبيق وسيكون شكل الكود كالتالي: 


4 © 1122116 . 
:#60 :مم01 
:1 ,131725 ,"202132 مم11 131712265" :117 1متة 120525-12 
:5 : 26 120125-53 
2025-1125 
:م1 24860 551134 :ععلعمط 
:2 م4 عدم4 عدم4 : 2062-2201115ه20 
: 26130215 
: 2120321-50 
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قمنا بعمل الكود اللازم تنسيق الديف الذي فيه النص المتحرك بالإضافة الى خصائص النص نفسه. في السطر ١٠١1‏ اضفنا اللون» في السطر ٠١‏ حددنا 
اسم الخط المطلوبء. في السطر ١٠١5‏ حددنا حجم الخط ١8‏ بكسلء في السطر ١١١‏ حددنا الخط يكون عريض في السطر ١١١‏ حددنا الحواف او الاطراف 
بشكل خطي وبلون محدد اعلاه بمقدار ١بكسلء‏ في السطر ١١١‏ حددنا مقدار حدة زوايا الديف بمقدار ؛ بكسل لكل الزواياء في السطر ١١”‏ حددنا 
ارتفاع الديف "١‏ بكسلء حددنا مسافة معينة من اعلى أو بعد ؟" بكسل. 


بعد التطبيق أعلاه والحفظ سيكون الموضع بالشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


إودة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن | 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل د يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 5350م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطات الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة, » وكذلك فى المستوىك 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن . 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل د يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 5350م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطات الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


خاصية الخلفيات (120ا0::ع1ء82) 


من أهم الخصائص في تصميم المواقع الالكترونية هي الخلفيات لأن الموقع في يهتم بالمظهر ولأن الخلفية تغطي مساحة كبيرة في الموقع بالنسبة 
للخلفية العامة للموقع أو خلفيات الأجزاء داخل الموقع الإلكتروني. سنقوم الأن بعمل خلفية للموقع كاملاء نقوم بإيجاد خلفية مناسبة وهنا ملاحظات فنية 
يجب التنبيه لها وهي : 


- نحاول قدر الامكان بأن يكون لون الخلفية مناسب لألوان الموقع ككل. 
- يفضل أن تكون الخلفية لون محدد من أجل الحفاظ على الموقع خفيف التصفح. 
- إذاتم عمل صورة كخلفية تصغير حجمها قدر الامكان. 


لدينا صور كخلفيات سنستخدمها كخلفية للموقع كل خلفية لها خصائص وقيم معينة حسب رغبتنا : 


- 


ومز2وط 


كما تلاحظ أعلاه أنشأنا مجلد جديد أسميناه 5# ووضعنا فيه الصور الخاصة التي سنقوم بتعيينها كخلفيات وهن كالتالي: 


5 (عم[.081) خلفية ومقاساتها ل و غ# و وغ بكسل). 
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- (عمز.2ع) خلفية ومقاساتها (4؟١١588*1‏ بكسل). 
- (©م.4ع0) خلفية ومقاساتها (00*15٠؛‏ بكسل). 


نقوم بعمل الخلفية للصورة الأولى وسيكون ذلك بداية بعمل كلاس (7003) بدون نقطة ضمن ملف الوو716.0] في بداية الكلاسات وهنا ملاحظة وهي 
اننا لن نضع نقطه امام الكلاس كما ستلاحظ لأن كلمة (0013) بدون نقطة كلمة محجوزة ضمن البرمجة في الووح لذلك نضعهما كما هي مع القوسين 
الذين سيحويان الخصائص وكما في الصورة التالية للكود: 


4خ نك 
د (329. 1وط/وط) 1121 : ©220-321266نام2وعل1ء 3ط 5 


كما في السطر © أضفنا خاصية خلفية بتعيين صورة وحددنا مكانها بواسطة برنامج الدريف ويفر. وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


دورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


أجزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء اء أو سقطرة أو سوقطرة: هي أرخبيل ب يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقفريقى 50م جنوب شبه الجزيزة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر, 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرت الأفريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهتدي 
قبالة سواخل القرت الأقريقى 0م جنوب شبه الجزيرة سي . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العزبية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك قي المستوى 
الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 


كما تلاحظ أعلاه تم تعيين الخلفية على جميع انحاء الموقع (7007). وهنا يجب ان نلاحظ ان الخلفية التي قمنا بتعيينها لها مقاس صغير ولكن بشكل 
اتوماتيكي يتم تكرارها في جميع النواحي في الخلفيات القادمة سنضيف قيم مختلفة للخلفية. 


نأتي لتطبيق الخلفية رقم ؟ وسيكون الكود بالشكل التالي: 


لع 0 4 
: (329 . 2وط/وط) 1121 : ©20-3171296نا20دوع1ء 3ط 5 


كما تلاحظ اعلاه تم تعيين الخلفية رقم " وسيكون شكل الموقع كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


ا ا ا يمني مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة 1 رةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. رةء قي أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأقريقي 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


يمتى مكون من أربع جزر على المحيط الهتديٍ 
ربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه 


الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


كما تلاحظ الشكل أعلاه تم تعيين الخلفية على الموقع كاملا ونلاحظ هنا ان الخلفية تكررت أي الصورة ومن المنطق لمثل هذه الصورة أن لا تتكرر 
ولمعالجة ذلك نقوم بإضافة خواص جديدة. 


خواص الخلفية (626(ع:1821581:011110-1 - 1011120-205161011عاء82) 


لتعديل ماسبق من سنضيف بعض الخواص ضمن التعديلات التي نريدها وهي : 


- تكبير حجم الصورة طول والعرض بما يتناسب مع الموقع كاملا. 
- اضافة قيمة او خاصية ضمن كود الخلفية لجعلها واحدة فقط وبدون تكرار. 
5 اي 


نقوم بإضافة الأكواد وسيكون كالتالي: 


20 
:426249 :02 1ه - ل تتامع وعاع قط 
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في السطر ٠ه‏ تم تعيين لون خلف الخلفية» في السطر " تعيين الصورة كخلفية» في السطر سبعة أضفنا خاصية (026©128100120-70510102) وتعني 
مكان الخلفية ولها قيم منها(:رءع]2ع00-0)) واخترنا هنا قيمة م0 وتعني اعلىء اضفنا ايضا في السطر ١‏ خاصية (101020-17621ع121) وتعني 
تكرار الخلفية ولها قيم منها (20-1©7621) وتعني لا تتكرر وقيم أخرى مثل (7©21-2©") وتعني تكرار افقي و(7621-9©) وتعني تكرار عمودي فقط 
وسنتعلمها ايضا في الخلفية الثالثة. 


بعد تطبيق الكود أعلاه والحفظ سيكون شكل الموقع كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


جَرَيوة سقتازى جعال اللبيعة والسيلفة - اليمق 


قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة وكذلك قى المستوى 
ا الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 


| جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


زيقىي 0م جنوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
١‏ الكيلة اليه قد لف مشسحوك قرب وعد عأنوف عل لاقت الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليعين 


الأفريقى 0م جتوب شيه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
العربي ف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكتر.. 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل ب يمتى مكون من أربع جرّر على المحيط الهتذي 


21 اء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 


سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتي مكون من أربع جزّر على المحيط الهندي 


كما تلاحظ اعلاه تم ادراج خلفية بعد تكبير حجمها ولكن هناك مسألة أخرى يجدر التنبيه لها بالإضافة الى ان الخلفيات الكبيرة تؤثر على سرعة تصفح 
الموقع لدي ذوي السرعة المحدودة ايضا ان عرض وطول الشاشات للمتصفحين تختلف من جهاز لأخر لذلك دائما يفضل عمل الخلفيات الصغيرة 


الموحدة. 


إضافة الخلفية الثالثة سنقوم بالتعديل على الكود وسيكون كالتالي: 


في الكود أعلاه في السطر ه عينا الخلفية المطلوبة» في السطر 5 اضفنا خاصية تكرار الخلفية واختر 


وسيكون شكل الموقع كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


(52. 4يط/وط) 1121 : 3171296 -201ناه2ةوعاء قط 
-2626315 : 262631 -1622011220 23 


نا القيمة (-21©م©) وتعني تكرار افقي فقط. 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 50كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة» وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل بن يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقي 350كم جتوب شبه الجزيرة الحربية [1]. إن . إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الجزيرة العربية قد خلف مستوى قريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر., 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة» وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


إضافة الفوتر (الجزء السفلي للموقع): 


ع طا.0 آم جاععغ. نا لانالانا 


أعاءهأم حاعع]©0]طأ :اتهمطع 


1 ا ١‏ 
١ ْ /‏ 
/ ا ا 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 ااا كلا 


نقوم بإضافة جزء أسفل الموقع وفي نضع روابط وحقوق الموقع واي شيء يمكن وضعه هناك وسنقوم بعمله بما تعلمناه سابقا من روابط وديف 
وكلاسات وسنقوم بالاتي: 


- عمل كلاس للفوتر. 

- عمل ديف وربطه بالكلاس. 

- اضافة روابط, 

- تعديل لون الروابط والخلفية للديف وسيكون الكود كما في الشكل التالي: 


دد 
> ع 


224 
: 454744 : 0 1ه -0ناه دوعا قط 
: 21 537215-56 ,5626573 ,13202183 : 1117قتة ‏ -12025 
: 62 :52625-31301231 
:5 : 2025-5126 
:م 4999 55114 :ععلعمط 
3232 3م32 م3 : 220111315-ع2دع203 0ط 
: م50 -22 2182031 
: 


نط نةخ نم نِم نم نَم يم زن 
ذه ظرم ا 65١‏ ل- 6 ها تت 


شم شم كم قم مم مم مم هكم كم 


قمنا بإنشاء الكود أعلاه. في السطر ١١١‏ تم انشاء الكلاس للفوتر وسميناه (606»7)»في السطر ١١‏ تم اضافة لون للخلفية الخاصة بالفوترء» في 
السطر ١١4‏ تم تحديد الخط المرادء في السطر ١١5‏ خاصية تحديد مكان النص وحددنا بأن يكون اي نص في الوسطء في السطر ١75‏ تحديد حجم 
الخط. في السطر ١١17‏ تم تحديد حواف الديف. في السطر ١١8‏ تم تحديد مرونة زوايا الديف. في السطر ١759‏ اضفنا خاصية البعد من أعلى بمقدار ؟ 
بكسل. 


<"ععجنخ "و 185 039> 
| <3/>اتصل يتاح<"#"-2عطط 2ج> 
| <ة/>من تحن<"#"<-#ععط > 
<2/>خارطة الموقع<"#"-2ع2ط ج> 
<عط/ > 
<5232 />جميع الحقوق محقوظة لدورة تعليم المواقع<52832> 
<03 / > 
<01 > 


ننتقل لصفحة 106.611 وكما تشاهد اعلاه اضفنا الديف قبل نهاية الديف العام الذي يحتوي الديفات كاملة. في السطر ٠١١‏ تم اضافة الديف وربطه 
بالكلاس فوتر الذي انشأناه »في السطر ٠١7‏ و”١٠و4١٠‏ اضفنا روابط ووضعنا # ولم نحدد إلى اين فقط للتمثيل ويمكنك تحديد الصفحات بنفسكء, في 
السطر ٠١5‏ اضفنا كود الانتقال لسطر آخرء في السطر ٠١5‏ اضفنا نص الحقوق بواسطة («روة).؛ في السطر ٠١7‏ اغلقنا الديف. 


بعد التطبيق والحفظ سيكون شكل الموقع كالتالي: 


جزيرة سفطرى جمال الطبيعة والسباحة - البمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هي أرخبيل يمنى مكون من أربع جزر على المحيط الهندي قبالة 

سواحل القرن الأقريقى 350كم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه الجزيرة 

العربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى الاجتماعي لسكات سحي 


الجزيرة تفاصيل أكثر.. 


اتصل ينا | من تحن | خارطة الموقع 
0 جميع الحقوق محفوظة لدورة تعليم المواقع 


٠ «٠ 


خاصية الشفافية (/6أ32م0) 


خاصية الشفافية او العناصر الشفافة تعتبر من الميزات الجميلة تضيف للموقع نوع من الشكل الجذاب وهي تحدد شفافية الصور والخلفية وغيرها هنا 
سنقوم بتطبيقها في ديف النص المتحرك وسنقوم بعمل التالي: 


- في كلاس (2121:0016) نضع خلفية بيضاء. 


١/1081: 009677 0 20000000‏ 
لامي أعم.وامحاعء1©هم]م1 :اأهمع 2 772755202 2:00967 08118/ا 


- نضيف خاصية (15عدم0) ضمن الكلاس السابق ونحدد القيمة المناسبة للشفافية. 
سيكون الكود كما في الشكل: 


4 112201166 . 
#222 :012 01ع-720ناهع وعاع قط 
:5 .217:0 05361 
0 4 :مم01 


كما تلاحظ الكود أعلاه في السطر ١١١‏ تم عمل الخلفية اللون الابيضء في السطر تم اضافة خاصية الشفافية وقيمتها (0.5). يمكنك تغيير القيمة 
وملاحظة التغييرات. وسيكون شكل الموقع كالتالي: 


11111 


دورة المواقع والإعلام الإلكتروني 


و« و« 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء اء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن أفريقى 350كم جتوب شبه الجزيرة العربية [1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل د يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 350كم جنوب شبه الجزيرة العربية [1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


اضافة الخطوط 
بالإضافة للخطوط الموجودة والمعروفة والمدعومة في المتصفحات يمكننا ايضا اضافة خطوط حسب الرغبة للموقع الالكتروني وهنا سنتعلم كيفية 
اضافة الخطوط لصفحة الموقع بواسطة ال55©. 


بداية نقوم بعمل مجلد جديد وليكن (40165) وسيكون في داخل المجلد ملفين (21:غط.001؟) وملف (6021.055) . ولدينا الخطوط التي نريد اضافتها 
للموقع في مجلد اسميناه (0215]) كما في الصورة صور الملفات كاملة: 


512 عم 750011 ع:03] عصمةلا 

عا عام 1117م 715/6 كاممع لال 

118 ...5 عا/و5 ومالدعدقع ‏ 1757م 7١15/٠/7‏ غمه ا 
11 ١10لا‏ عممعطع ‏ 11:57م 715/67 غمه؟ © 


الخطوط داخل مجلد (102165): 


١/08 ||: 00967 0 1000‏ 
امه أعم.وأم داءعع]©0)م1 :انمع 2 772755202 2:00967 8|118 0لا 


512 عميا1 01م عغؤون عمم ةلا 
68 76 عا 01ع اام اليه 11 أمع.قانوع-:ممع هلقث ل )| 
68 49 عاط مالا 11م اليه 11 ؟أمنادةانوع8-,ممعولورث [ | 
68 162 ع1 غمه؟ عميزا] معم 0‏ لءنلء ص 7١17/٠6/7١‏ نامع صطغمم؟ ‏ 4 
68 80 ع1 غمم؟ عملااعنم 1 قء+نلء ص 7١17/6/7١‏ نالع مغمم ‏ . 
68 359 ع1 غمم؟ عميز! عدم 6لا 4ع + 
8 3/5 ع1 غمه؟ عميز] عدم ا عاغة ‏ ى 


لإضافة الكود الخاص بإضافة خط كما في الكود في ملف (10121.055): 


:022-11" ع256قظء6 


/* 225عتتتاء 20  ©55‏ * 
4 مع23-ج جم 6 
: "202025" : با1قتقتةة -20525 


: (052 . عضت همع / 205255 ) 1121 : 52د 
: (552 . تالاعتتع دمع /20255) 1121 : عو 


1 
5 
5 
6 


1 
4 مم22 - ع ومع 6 
"56 :خ17تسة- ه12 
: ( 552 . 20255/51516) 121 : 512 


1 
4 مع23-ج دمع 6 
: "5626" :1117تتةة -2025 
: (52 . تعدعع /20255) 1121 : 51 
1 
4 عع23-عدمع 6 
: "56152" :117 1متة -26ه20 
: (2-8269611132.6028 20255/23300200 ) 1121 : 512 
: (7022. 91113 23230302002-86 /20255) 1121 : دق 


م6 ها 


هم فم فم فم نَم نِم نِم نَم نِم نِم ذم نيم يم نم نب ش) شب ذه 


هه 


) 


14 
: "202022" : 117 هتقتتة 2 -12025 
:2052 :25-5172ه20 


فم نم نن ظر كن 60١‏ ل- 


014 
:"61516" :غ11 ختةع -2025 
:م20 : 2025-5317 


0 


هه 


3314 
: "5626" : 11 نتتة 2 -025 12 
(:15025-5126 


ل 


ذِن) 0 


كما في الصورة أعلاه أضفنا الكود الخاص بإنشاء أو اضافة خط جديد للموقع واضفنا رابط لمكان الخط حيث »7014-20© وهذا الكود عبارة عن 
1ن أي قاعدة معروفة لإضافة اي خط ومدعومة في كثير من المتصفحات مثل موزيلا فايرفوكس وجوجل كروم وسفاري واوبيرا وغيرها من 
المتصفحات 


في سطر ٠ه‏ نقوم بتعيين الاسم للخط حسب ما نريد. في سطري و“ نحدد السورس (©51) أي المكان الموجود فيها الخط. وبقية الأسطر نفس الفكرة 
الى سطر ؟١5.‏ في الاسطر 74 الى 4" أنشانا كلاسات مختلفة وعينا في كل كلاس خط معين وسيتم تعيين كل كلاس لنص معين ايضا كما في صفحة 
(لسغط. )مم /) وكما في الصورة: 


١/08١1: 00967/ 0‏ 
أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 00967 :2 اا 08لا 


أع طا.0 آم حاععغ. انا نالا لاا 


<520هط> 

</ "2-8 ج ادع وطاقطه : 1ل7غط رعجرمج "عت وم ع صم "م15 عله عدهن "72 1ناوه لوطع عط دعع > 
<281516/> اضاقة خطوط<251516> 

</ "دقن /عجرعج "جتعوزعء "281-75132885 "ققح . دمع "ع 2عطط 11> 

<0دعط ار > 


<7خ001ط> 
<"25612ع"7->952 3131 017> 


دل 'عظة 
<041/>رواد التكتولوجيا - دورة المواقع الالكتروتية <"6616-2119122:062562 "->6 51811 "13551"-1355ه 01> 
</ عط> 
<*041/>رواد التكتولوجيا - دورة المواقع الالكتروتية <"5-2119121:622562 518316-62 "135352"-1355 03> 


</ عط>» 
<041/>رواد التكتولوجيا - دورة المواقع الالكتروتية <"911:62562 51851716-61-2131 "135353 "1355-7 01> 


<03 /> 
<2001ط/ > 
خلصمطعط > 


لاحظ لدينا 1 نصوص كل نص داخل ديف معين كل ديف أخذ كلاس مختلف وستكون النتيجة كما في الصورة: 


رواد التكنولوجيا - دورة المواقع الالكترونية 
رواد التكنولوجيا - دورة المواقع الالكترونية 


رواد العكنولوجيا - دورة المواقع الالكترونية 


ا 0 /00967 :عا |08 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 1 اا8 ٠/0‏ 


1501 1زم 


١/08 ||: 00967 0 71100‏ 
لامي أعم.وأمداءعع]©0)مز :انمع 772755202 2:00967 8|118 0لا 


الباب الرابع .219501 ع 110م 


مقدمة حول 115م 

تعلمنا في الفصول السابقة لغة هامة في تصميم المواقع الالكترونية وهي لغة ال(,1117311) طبعا قد يتبادر في ذهنك العديد من التساؤلات وانت تتعلم 
هذه اللغة الهامة وتتذكر أنك ترى مواقع اكثر تفاعلية مع الناس كمتصفحين ومع إداريين الموقع وقد تتساءل هل على مدير الموقع الالكتروني ان يقوم 
بتعديل كود (,1117311) داخل الموقع كي يضيف خبر معين وإذا اراد متصفح التفاعل مع الموقع والتعليق على شيء ماء داخل الموقع كيف سيكون ذلك 
تساؤلات كثيرة لا يمكننا إحصائها ومن سيجيب على هذه التساؤلات هو مؤلف لغة (2112) وهو (1.©10011 1*25201015) والذي أنشأها في عام 
4م 


لغة ال(611) حلت جميع التساؤلات السابقة يمكنك الان عمل لوحة تحكم يدوية للمستخدم العادي ليضيف الأخبار والمحتوى للموقع سواء النصوص 
والصور والفيديوهات وغيرها. لغة ديناميكية وركز على هذا الوصف «ديناميكية) أي تفاعليه .تتفاعل مع المستخدم وتخزن بياناتها في قاعدة بيانات 
(501 817) التي تستطيع لغة البي اتش بي التعامل والاتصال معها ولن تحتاج بعد الآن أن تقوم بالتعديل على الكود لتضيف نصوص للموقع مثل 
ال(.1117311) والتي توصف بال(ستاتييك) واحفظ هذا الوصف جيدا ايضا فهو الفرق بينها وبين ال7118 وتعني ستاتيك أنها جامدة أو ثابتة لا يستطيع 
سواء مدير الموقع او المتصفح التعديل فيها إلا عن طريق الكود مباشرة. 


يجدر الذكر هنا إلى أننا لن نستخدم ال2117 فقط منفردة بل ندمجها مع الم7117311 لأنها الأساس سواء مع البي اتش بي أو غيرها. كما ننوه أنه في 
هذا الفصل سيكون شرح عملي وتطبيقات عملية لن يكون هناك كلام كثير حول البي اتش بي وبعض المحتويات فيها تحتاج لوقت كبير ولكن سيكون 
الشرح والتطبيق لما سنحتاجه في انشاء المواقع الالكتروني والتي سنطبقها في الحياة العملية. كما أن هذا الكتاب أنشئ أصلا من أجل تعلم نظام إدارة 
المحتوى جوملا والتعرف كيف تعمل المواقع في هذا النظام. وسنبدأ بالتدريج في تعلم البي اتش بي من الاساسيات الصغيرة الى الاساسيات الأكبر ثم 
التطبيقات التي نحتاجها. 


لغة البى اننش بى (2112) 

هي لغة برمجة لتطوير صفحات الويب وهي لغة مفتوحة المرصد (غير مملوكة لشركة) يطورها فريق من المتطوعون وصممت لتطوير وبرمجة 
تطبيقات وصفحات الويب. تعمل البي اتش بي على السرفرات الخاصة بملفات الويب وتقوم بتنفيذ جميع اوامرها من خلال الخادم او السرفر في 
المتصفحات والتفاعل مع البيانات ومخرجاتها. 


التركيب البرمجي أو النصي: 
لغة البي اتش بي تعمل من خلال تركيب معين وطريقة معينة في طرح الأوامر للخادم وتنفيذها عبر المتصفحات وهنا صورة عامة لكود بي اتش بي: 
معطم > 


:' أهلا بك في لغة البي اتش بي ' 0110© 


2 


550000 0 009677 :|| 1/08 
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متطلبات العمل على (5115) 


-١‏ برنامج (زع1ع1756ة7). 
؟- برنامج (056) زع توع7تتطوء:121). 
"'- متصفحات ( عتتروخطء 600816 أو دم]ء11 31021112 ) 


قبل البدء في تطبيقاتنا وتعلمنا على البي اتش بي نحتاج إلى أدوات التي سنطبق عليها هذه اللغة. طبعا كما ذكرنا ان البي اتش بي تعمل على خوادم او 
سرفرات ولذلك تم إيجاد سرفرات وهمية ضمن الجهاز العادي أو برامج يمكنك العمل عليها وكأنها سرفر لتقوم بعملك في البي اتش بي وكأنك تعمل على 
سرفر حقيقي لذلك سنحتاج لبرنامج سرفر مثل ( 515261 552:23 أو “51561 «رمددروعد_) سنستخدم هنا 5161 م22 ولك حرية الاختيار من 
بينهما. إضافة الى الدريم ويفر (056) 1(1:623135162521) الذي استخدمناه سابقا وأحد المتصفحات ( عددده:دداء عاع00© أو دمع :11 31021112). 


السركر المحلى وطريكة تركيبه "51771 11721222) 

في البداية نقوم بالتأكد من نوع أو رقم النظام الخاص بنا بافتراض ان النظام الذي نعمل عليه هو ويندوز سفن (7 7171300185) لتنزل برنامج ( «رددده؟؟ 
0 المناسب للنظام لأن لدينا نوعين (514 32) و (514 64) وذلك عن طريق الضغط بالفأرة بالزر اليمين على جهاز الكمبيوتر في سطح المكتب 
واختيار خصائص ستظهر النافذة كما في الصورة: 


ممعنديزك <١‏ وارنععك5 ممه لمعؤكيرد ١‏ اعمده امغخممت م كار 


ج« 


1 2_7 : عمواط اعموظ أمغمم»6 
اعنام امه "ناملا أنامط3 ج10 ةماما عأدوط بثاعا/ا لي يت 


مهت غتلع دعاك ملالا 'عودمداا عءامه0 كا 
عأدحمغانا 7 دسم مالالا كوم تناع عأممع5 را 


لع صعدع؟ عغطوة ااش .صمغورممءم #مدومى زا 2009 © غطاورلامه©) ممتاععغمام ممعندررك الآ 
1عاءق8 عع ع5 كملاع تع كيز عع مقلم 8 


5 
.عضا ى أممعععاع بزمره5 باع اناغ 3 آنام3 ااا 
'عغنام مره © 1/810 :اع هاا 
0 ا كم ١‏ عط مغ دلعع7 ععلم]1 ععمع أرعمعط و دف ا 5 نا 
3 !6 2.60 2.6061 © نام 15-3230 (ا/ا1)عرم0 (طغاعغم1 بامووعع نرم 
(عاطوكب 68 5.88) 68 6,00 2 :(إ/الشظ) بورمجمعحم لعالمغكمآ 
لاع كز5 ومل وعم 0 خأ- 64 ع مج لاع و5 
برقامكة0 كتطة وم عاطداتهية كز مما طعنه1 عه معم ملز تطاعنه1 قمة معم ودد 


ممع ن) ممعم 


غ01 ممناك عضا ى أصمعععاع لامم5 ع غدل ملا كسسول مالالا 


لاحظ (©م7) 2دءع756) ونلاحظ نوع النظام 4 5 بت. الان نذهب للموقع الخاص بالسرفر (7ع5©25 م22) على الرابط التالي: 


01001 2. :21031051171 17317377.357//: راطا 


بعد الدخول على الرابط أعلاه في اسفل الموقع ستظهر لك الصفحة التالية : 


ل 0 /00967 :عا اا8 اا 
0 1 أعراءه أم حاعع]©0]طأ :اتهمطع 2 /2:00967 ٠/08١1‏ 


اع نازع 05 0ج الا ال“ 


10014 طلذالااان11 5118171 كلام لس ]للا مه 01 كيزام ,ميرم ,عزعومم / ١‏ 


الام “ااانا 


3 : رفدقاو5 4.0.4 : هفخ زازمنام 5.4.12 : ملإم 5.6.12 : كيزا 2.4.4 : عطعهوم 3 : رففدقاو5 4.0.4 : ممفخ زازه زه 5.4.16 : ملام 5.6.12 : 0 كارا 2.4.4 : عطعهمم 
3 : وداضء20 3 : وناهء0< 


3.41 ممق ةناانام!6 1.5 00 2.1.2 ودحاء 0< 5.4.3 ملام - 5.5.24 اوعيارا - 2.4.2 عع همق مفويزانام!م 1.5 0 2.1.2 وباء0)< 5.3.13 ملام - 5.5.24 اوورزارا - 2.2.22 عع وريم 
0 ممام6طء بن 1.3.3 ,5018143 0 60طء»» 1.3.3 5018100 3.4.10.1 


في الصورة أعلاه على آخر نسخة على اليسار في الأسفل نقوم بتنزيلها وهي (2.210 (5.3 2117 ع4 81715 64) 7142/1125191971918). نقوم 
بالضغط عليها وستظهر الصورة التالية: 


5ع /ألماع/20م 131 5نا0/ ع0 113أأ11/عم 00105 أنال 0011013158 عع أاملمع؟ ععنانادم 5نام/ا .امت عممعء || 5نا50) ألع7اعةأناأ02و عامأمهمذال أدع بعبمع5كم دللا 
5031162 عا 0 5نام/ أ5 _)علصمع5م301لالا ع0 005 |أنااملاغ عات 1625| 10013]1005م] 5ع 5عأنا0] عبان أ3105 ,عع أألغ غأغاء50 ,نزدناا ,عالق '0 م15أ2نم0] 5غ الجااعج 
اإلاعع 1ك ١!‏ 001081030 قوع ناملا عع/انامم 5لاملا ,35م 


4 0 266 عو2اءج2 عاطقاناط أ أ5الع2 581 2010 ++ن 1ناذا/ا الةأ05| أ5نال نا0/ : قل الااكاهلالا 
210-28ام01/00101/020/0/0123115.35» 05011 عم :7115 : كأأم 32 علاع.86غر_أوالع]ع/ا 501 1/010 
010-123م25. 0/012115ع/0501101/001001020 ع1 م71 - كاام 64 علاع. 64عر_إوالعء/ا 561 1/010 


5عاللظالا بعنذه 2 ععنلمعكملمدثالا القأكما 0غ لأ أهم 20 : ق0لالاتعاهالا 
2 اعلممع5م300لالا وما الخاكما عرم]ع6 للمماععمال ك5طاناافلائا علطا عأاعاع0 200 | ال2أ05|لانا ,0313 )ناملا /521 ,)ع آنام ام ناملا مه 60١|21أكما‏ 15 5طالااظلالا )| 


عع أملمء ]هدمع اا آه مملدععن ١/609‏ طلأبنا لمعاأمجمء مععم عند عاعدأد بعلمع5م هلالا 1/2.2 5 01 كأمعممممرمء عطأ الث : 46 الااعام للا 
)عا أملممء ]كمع نابا أه موتديع/ا ١/06‏ طأأننا 1120 مععم0 علنهحا ععنمع5م00دلالا أه ذممادمع/ا ععذاوجع 

0115م عاع513 ععلمع5م300 الا أه (مأذاعلا 5نامألاع]م طأأنلا عاع2أ5 2.2 01 5أ000م7مء عأ لم3 ناملا ,50 

عع نم 5م300 الا عا0 ]105 30 أعو ااأنلا ناملا ]ا هل ناملا ا 


نضغط على الرابط الذي باللون الاصفر في السطر الثالث (.0172)17 )1 0013131030 231 7011) وسيتم التنزيل مباشرة لجهازك. في حالة كان نوع 
نظام الجهاز الخاص بك ؛ 5 بت قم بتنزيل النسخة (2.219 (5.3 2111 عق 1115 64) 1741/117515177191 (02037711041). 


تقوم بتنزيل البرنامج الى جهازك ثم تركيبه على الجهاز الخاص بك. بعد التركيب سيتم وضع ايقونة على سطح المكتب تحمل الصورة التالية او شعار 


الرترع ع5 «رحصدد؟): 
(لنا' 
ك0 


قم بتشغيل ال:وع”5»17 1ج" ولاحظ الأيقونة الخاصة به في الشريط السفلي بجانب ايقونة الصوت وسترى في البداية يكون اللون بالأحمر وتعني بداية 
التشغيل واللون الاصفر تعني تشغيل السرفر بالنسبة للمدام والأخضر الاستعداد الكامل للمام وال501 749 .ولابد ان يكون باللون الأخضر للعمل 
عليه. وهنا انتهينا من تركيب البرنامج الذي سيعمل كسرفر لتطبيقاتنا للغة البي اتش بي و51 1/19 


١/08١1: 00967/ 0‏ 
أعجا.ه أمحاعع]0©1]طأ :اأهمع 2 00967 :2 اا 08لا 


أع جا. 0 أم حاعع]. /الانانا نالا 


طريقة عمل السرفر (اء177ء5 طحطد/) 


عرفنا كيف يتم تنزيل البرنامج وقمنا بتنزيله على الجهاز وتركيبه. نأتي الان الى معرفة كيف يعمل السرفر الخاص بنا دائما عند العمل على السرفر لابد 
من تشغيله اولا سواء من سطح المكتب او من ايقونة البداية (5916). بعد تشغيل البرنامج وظهورها باللون الاخضر في الشريط السفلي كما في 
الصورة : 


كما تلاحظ اللون الأخضر للأيقونة وهو ان السرفر مستعد للعمل بشكل كامل. ننتقل الأن الى المجلد العام الذي سنضع فيه مجلدات المواقع التي نعمل 
عليها والمسار كالتالي: (جهاز الكمبيوتر - قرص (:)) - مجلد (م23ة؟) - مجلد (79387) ). المجلد 777907 نضع فيه المواقع كل موقع مجلد داخله 
وقبل ذلك نقوم بحذف اي ملفات بداخله وادراج مجلدات المواقع الخاصة بنا. وداخل هذا المجلد اعتبر الموقع الخاص بك في سرفر حقيقي على الانترنت. 


نأتي الآن لتشغيل السرفر في المتصفح وهناك طرقتين بعد تشغيله وظهوره باللون الاخضر: 
الطريقة الأولى: فتح المتصفح ووضع الرابط التالي: ( 0://10221051))]< ). 


الطريقة الثانية: من الأيقونة للسرفر نضغط بمؤشر الفأرة عليها باليسار وستظهر خيارات نضغط اول خيار في الأعلى (1002112054) كما في الصورة: 


37لا ,عثلمق بزط لعععحصمم 
دمطاةء0ا 5 


وحم عش زاامدام (كا | ركني 
لمعتل ادصممر الى 


كع اممع5 ااث غ5 
كعءابمع5 الث مهغ5 
كعء اممع5 الث غردؤوع 8 


عمتامن غنم 


بعد عمل احد الطريقتين السابقتين ستظهر الصفحة التالية في المتصفح (1002112056): 


1 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


عكتدعوةم] ممتكعلا 2,2 وملدعلا 


عم جل 
معدل غ3 
عانه اق 
لماودبرم اق 
حول طا3 
اود جا 
كينا 
قحا ظ3 


غأ0076_حرمه اق 
م7 جل 

مدع 

) 
امعاطنا جع 
1ح 
ومتدطص اق 
عأذاود_ملم طق 


عدلوعات 3 

1 6 

امعد اق 

ممنددعد اق 

ماج خأ 

لاع امممنك طق 
ععالم هطع وعدمد اق 
اودلاتت_ملم لز 


لاأقووعة جا 
وعء جل 

دز ل 
ممتععلقعم جا 
مد جل 

داع طق 
00 
الودترص خالل 


08 
9ؤ5 
ع رع 5م 30/لا 
حا نا و1 ]تزه نع بحرعوه 
2 : ارمأوعلا عاعدمم 
373 :لمتومع/ا مبرم 
ععهه ماق : كدمتومع »ع لع1030 
عأدل جا 
1 
عمم جع 
عع امعان جا 
0ع جا 
00 1 
اودترص طق 
ونااعل» جاخ 
4 : ممأويعلا اوكيزاز 
5اه10 
()6كمتمم فق 
متسل د رمام فق 
كاعء مم2 زباملا 
#عاغممة لكا 


كما تشاهد أعلاه ظهرت الصفحة الرئيسية لل (102211054) وتلاحظ (100015) وهنا يندرج في الاسفل (111160م) وهي معلومات حول البي اتش بي 
في السرفر ورقم النسخة والاعدادات وايضا (238202112:مطام) وهو الاهم هنا ومنه نتحكم بقواعد البيانات بشكل كامل. أما ما يندرج تحت ( :70111 
و [10): هنا تظهر المجلدات التي تعمل عليها من مواقع وصفحات ويب وكل موقع يكون في مجلد كلا على حده. 


أع جا. 0 أم حاعع]. /الانانا نالا 


أعراءهأم حاعع]©0]طأ :اتهمطع 


0 /00967 :ع اا ١/08‏ 
2 /2:00967 1 اا8 ٠/0‏ 


اول تطبيق في (5115) 


نقوم بعمل مجلد جديد داخل مجلد 777707 ونسميه مثلا 5711. (تعرفنا مسبقا اين يوجد مكان 77979 ) 
نفتح برنامج عرع1(1:691121925. 
من برنامج نوع "تترروع(1 نختار (©11) ثم (09). 


بعد تنفيذ الخطوة السابقة نختار (5]15) ثم زر (2©866) كما في الصورة التالية. 


1-2 كك 


لع تعامعه ,ع8 مام 1 سس اذا ها 
مد ممه تعفمعط رقع تعامعه رفعيدة مسنامه 1 - 

تمدع رفتونا معساف 1 : 1 غاقاموية 7 ع1مها8 
0م قم بعهعط رلهتعامعة رفون «جنامت 1 
؟دطع وف 8ع لعب معساف 2 ١‏ 
© مه ممعم رإقطء قه 8ع | رمعم ممساف 2 أت ١‏ انصيهانا:6 تشاع ا 


مع فاه غطواء بلعم معسامه 2 
قم تمدع ,)هطع قله غطوا؟ بقعب مسامه 2 : 
0 رونا مسسادت 2 ووه مي 

8 قم بعف هع ,ددع قف جع رفانواا موسامت 2 : 
دطع له غطوة رونا محسام 2 8 غاممة5 مم موده 0 

قم تدع رعقطء فاه غطوا؟ ,قشولا مسامه 2 5 
معد مامه 3 : 3 

ععادمة فمة بعفمعط ,معن ونام 3 3 بيك الا 
نهنا مسسامه 3 : 

> اقومةلكمة1 70.1.0 : بعامه؟ نمه ععدعط رفتنوذا مامه 3 
ب بببررر22 2 222 222 )معط ,قداء90 غطواء رفع:ة مصساف 2 :7115 
تعادمة مه تمدع رفع»دة مجداف 3 :100715 


+ مدعنا م 804 


62 


ومقاافع ##رعاممعمآ عاطهدع 
أوناهاف دمعمادي8 أنوطة ع هه مقع 


<"الستخطعءد / 1999 /روعه . 73. 076/ / : وععط">-قطلسعد لتسغط»ه 

جقوعط> 

</ "2-8 ع تدعة وعقطه السطط /ععرعة "مع همه "مهاسع ع م0 "72 1نيوع-62 26 وععمسه 
<22>/51516عنتنات20 215164ا< 11> 


م #تراع به #4 ع ج الماع 


العالةا 


281 قهعم) 


3 0401 |2" هقشع 12 مه - ع0 ذوهة | |- عممن] ##ممع 2 |لصر<»] 
- و15 خذت - عاونا 8 ع0 م1 55 و 
| ...187غكنا | [....ععشيعمميم عودم. ْ 


ا 0 /00967 :ع اقول 
أع جا. 0 أم حاعع]. /انانانا نالا 


أعما.هأم حاعع]©0]م أ :اتهماع 2 00967 :2 ع اا8 وا 


لاحظ اسم الصفحة (12110160]) نقوم بحفظها بالضغط على (616) ثم (©5896) ستظهر نافذة تحدد لنا مكان وضع الصفحة وبدورنا نقوم بالذهاب من 
خلالها الى القرص (:0)) ثم (م12) ثم (77737) ثم المجلد الذي سنضع فيه الصفحة التي سنبرمج فيها (77611) ونسمي الصفحة بأي اسم وليكن 
(<020). 


سيكون لدينا ملف بي اتش بي جاهز للعمل عليه وتجربته. 
نقوم بعمل أول كود في البي اتش بي وهو كالتالي: 


.ملع عاقا مياد 0لا 


31 312111-51 / 10110 / 11ت طعة /+11 / 012 . 13مآ. 6761م / / : نعط" "511 / 102317 1قطقع1 0. 1 :311111 1811 / /113/ / -" 21181:1 لسعط 815ئا2021 ! > 


5 


< "قتاع عد / 1999 / يه . 113. 7076م / / : جع 5ط" -0125ه2 لتتخط> | بي 

<0هعط> 3 

</ "2-8 ج العم 25 قطه ‏ : عط رع عدوج "حتت تع تج رمه "625-1156 2ه "011175-27 2555-6 16> 4 
<225>/21216تنا 20 60 231516<1253151> | ا 

<0دع2/> | ن 

<037ه6ط> 90 

8 

<2 م'مرحيا يك قي عالم البي اتش بي' هع 22> أت 

10 


<0017ط/ > | اناك 
<لسعط /> 12 


كما تلاحظ أعلاه قمنا بعمل اول كود في ال7117 ونأتي لشرحة : 


مام7> هذه اول اساسيات البي اتش بي عند اي كود تريد العمل عليه في البي اتش بي لابد ان تكتب علامة الاصغر وعلامة الاستفهام وحروف البي 
اتش بي كما تراه امامك ودون اي فراغ بينهم وهي علامة او شارة للسرفر بوجود كود بي اتش بي. 


' ' 01:0 وتعني إخراج نتيجة أوشي معين أو أمر للسرفر بإخراج ما بين علامتي التنصيص (نحن طلبنا اخراج نص ترحيب كما نشاهد). 
: فاصلة منقوطة وتعني انتهاء الأمر وهي مهمة جدا وبدونها لا يتنفذ شيء بالإضافة لعلامتي التنصيص. 

<7 علامة الاستفهام وعلامة اكبر وهي تعني انتهاء كود البي اتش بي وهي مهمة أيضا. 

تنفيذ الصفحة : 


لتنفيذ الصفحة التي قمنا بعمل الكود فيها نقوم أولا بالحفظ ثم فتح (114)0://1022112050) تحت (5)عء[210 :570:1) ستجد المجلد (7611) الذي فيه 
صفحة الويب التي تبرمج فيه. نضغط على المجلد سيفتح لنا مباشرة الصفحة ([ام.:©10) وستظهر النتيجة كما في الصورة التالية: 


مرحبا يك قي عالم البي اتش بي 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأم داءعع]©0)مز :انمع 2 772755202 2:00967 8|118 0لا 


أساسيات البى اتش بى (ى 851 مبزم) 


تضمين كود 2117 فى صححات الويب 
يمكنك الان تضمين اكواد البي اتش بي ضمن (12401) وهي ميزة مفيدة كوننا تعلمنا كيفية عمل الموقع كاملا بتنسيق ال(وو0) ونقوم الان بتضمين كود 
ال(مطم) ليضيف للموقع التفاعلية أي يحوله من ستاتيك الى تفاعلي. 


الكود المختصر لل(2111) 51201:1-1285: 


في الكود السابق قمنا بعمل أول كود في البي اتش بي و شكلة العام او صيغته العامة كالتالي: 


لكن سيكون متعب اضافة ([1م) بعد كل علامة استفهام وعلامة أكبر (117م7>) كما في الصورة أعلاه. سيكون لدينا الان كود مختصر لذلك وهو كما 
في الصورة التالية: 


<2 م"برحيا لك قي الكود المختصر "مطعع > ل 


لاحظ حذفنا (مطم) من الكود. لكن هناك تعديل مهم في اعدادات السرفر (171ع5 مددح؟) لكي يتم قبول الكود المختصر علما ان بعض السرفرات لا 
تقبل او لا تعترف بالكود المختصر حتى السرفرات العامة على الانترنت لذلك لابد من تعديل في ملف 121ؤ.«[ام الخاص بالسرفر لديك من خلال الخطوات 
التالية: 


الضغط بالماوس على ايقونة السرفر كما في الصورة والاختيار كما في الشكل أيضا: 


اه الا 811 باط ع1 ع 0م 
غكمطاةءها [ها 


متم شزا/اامكام ها 
ممع ذل عدم كي 


. وملى]ءع /1 
1 كوصاغاءء منرم 
٠١‏ كممزكمعخك مبرم 


تمتمكم 8 


للق عاءان0 00 
وماءمعع مزعرم | | 


كععابمع5 اث غ5 
كع ابمع5 ااث مهغ5 
كعع ع5 ااث غروئوع 8 


2 جرع /ا جع وم 11 الا 


اك 


العربية (اليمن) 


عساامن غنم 


نضغط على الملف كما في الصورة أعلاه وستظهر الصورة التالية: 


0 0 /00967 :ع اا ١/08‏ 
ا ١‏ أع .هام حاعع] ©1010 :اأهمع 2 00967 :2 عااا8 ولا 


8800603559590 سب عه 1 11 11-111 1215252525 1 د كن معد منممق 


ماعل بعالا غوصرمع غللع علع 


(5ع ]تاتس 5) 05ظامعء5 300 15 ]01و11 .05ظمعع5 طأ (عتكذا-0)-عست)) 1115 أسأ.مطم 0ع ستاع ل تاء 5ن :101 111 , 
0 -1))_عطاعقوء.تاسا_نرءكهار 
000 

: 1311511256 000110115 


559 هتظ 


.21 رش :1101 علتأؤلاء 13115113256 كلشتامتكء5 2152 عط) عاطقسطظ , 
عستعسء /اعط.مطام//:مااط ‏ 
س2 ع عسنوس 


لاعع55ا16 ع00ء عمتشضومعع:1 111 2282 )20 نذه “تعطاعطك5 دعءستسععء0 عكتاعع نرزل كلطظط ‏ 
لاععط7 105 .تاعتناد 35 0ع55ع1:06م ع2 5101110 تاعتطكر عع"زتاود5 2122 25 5ع3) <2 برع 79> رو 
0 'أتاكء أتتمطة'"' 135 51016 عط ع كنا 101 3011 أقطا 5تقوع:8 لوناعتكء 5 :101 00ت تتتساوعع] ر 
115 521:20 7110 1) طغال]؟ .دم1اأةستطسرمء 35) <-2 320 مام > لانا؟ عط عكنا 0) 0وعأكسا ‏ 
تلأقدء عتامعء! تلق ناعتكاء5 ع2[ روع121151135 '1عطأه :5 355) ع1125) 01 ع5 320 ملطلالك5 01 : 
15اقعع2 أتاظ .)دع21امء 711:05 ع1) سأ 600 1:05؟7 ع12) 5لذز215م نا 0لاء 20د لع كتاأكترقء ر 
للناد ت1أسعتدناء 1)'5 بعسن) 1025 2 لاعناد :101 ع"1تاادع1 2 تاععط كقط أتكء اترمطد كلط) ر 

.تتاعط) 15 )"0011 3:011 120ع للتتتاوعع"1 ع5 أقاط بتجاتل1ط2)1 سمه 2105ككجلع 62 101 0160 مرمناد ‏ 
00) :عناله'؟ السواء12 : 
00) :عمله'؟ أاسعسمماء12 : 
00) :عنالة'؟ سمناعن 21:00 , 
2-5 م0-]2)/5101.مطم// :ماعط : 
0() - 135 _ندعم5101:6_0 


.5 <90 !> عانجاو-2كقة 11011ى : 
25-5 /ا2.مطم//:مااط ر 
م0 > 355)_ركة 


4 


كما تلاحظ أعلاه داخل ملف (21ؤ.طم) اضغط على (2421+8) والتي تعني بحث داخل الملف ستظهر نافذة صغيرة كما في الصورة للبحث اكتب كلمة 
(501) عندما تصل الى السطور المظللة تأكد من انها (م©) بدلا من (016). 


قم بكتابة الكود المختصر أعلاه وجربه بدون («طام) بعد علامة الاستفهام. كما في الكود التالي: 


<2 م'مرحيا يك قي عالم البي اتش يبي' 22128 «7طم2 > 
« كوتروتة 9 ووعت. و 
<2:" 101151116 115 00115 528083" مطعه 92> 


كما تلاحظ في السطر ١١‏ اضفنا كود مختصر وستكون النتيجة كالآتي: 


مرحيا يك قي عالم البي اتش بي 
110111 115 00102 5211011 


ملاحظة : لا فرق بين علامتي التنصيص " ') أو "١‏ "). 


0 0 /00967 :عا اا8 اا 
١ 0‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


٠و ٠»‏ .5 
تضمين عدة آكواد ودمجها 


يمكننا في ملف البي اتش بي دمج عدة أكواد في نفس الصفحة وهنا صورة عامة حول دمج الأكواد مع بعضها كما في الكود التالي: 


<”"050 . 15101231 31251311-1223125 / 191:10 /7011تقطعة / 11 / 012 . 163. اما'ماتما / / : و6اع 2ط" "11ظ / /2515102317ق1 0. 1 :3111111 211 / /113/ / -" 211811 لمسعط 15عئلا2021 ! > ل " 
<"01 2ع« / 1999 /روع<ه . 1713 اانمازما / / : جرع عط" -25 امعد لسعط> 2 
<20هعط> 3 
</ "152-8تعع 5قع2دقطه :5201 2 /ععدعج "->6 662 2م "625-1156 2552-6111-7002 2063> 4 
<2<>/281816: ' دورة المواقع الالكتروتية' هطع تتطم618516<>2> | كا 
ح<مدعط/> 
<0017ط> 


<2: 17-2-2014 ١م503‏ حرطم( > 

<2 معع503 مطعهة 27> 15 04356 10508375 <م> 
<خم0هط/ > 

< معط / > 


لاحظ كيف اضفنا في السطر ه لعنوان الصفحة نص بواسطة البي اتش بي ضمن كود (1231). في السطر ١‏ قمنا بعمل كود (1[7م) واضفنا شيء جديد 
(©5031) وهنا علامة الدولار عندما تسبق اي اسم هنا نسميه متغير (سنتعلمه لاحقا) علما انه عبارة عن مكان في الذاكرة نخزن فيه اي شيء. هنا 
اضفنا متغير ووضعنا أو خزنا فيه تاريخ معين. 

في السطر ؟ دمجنا كود بي اتش بي مع 1021[ كما تلاحظ ومعناه تعبيريا (اخرج لنا نص بالإنجليزي تاريخ اليوم هو) ثم بعد ذلك أمر بالبي اتش بي 
بإخراج ما في المتغير او ما هو مخزون فيه وهو التاريخ طبعا. وستكون النتيجة كالتالي: 


17-2-4 ذا عتهل 105033:5 


تضمين التعليقات فى الكود 


لعمل تعليق معين ضمن كود البي اتش بي نستخدم الإشارة (/* .... */ ) وكما في الكود التالي: 


<2 /* هتنا تعليق */ 50366-2١17-2-2014':2‏ ورططاه2 > 
<2 م503 مطعهة 72> 15 04356 1503375 <م> 

<تنتق هط // > 

إالسغط/ > 


كما تلاحظ التعليق في سطر ١‏ أضفناه ضمن علامتي التعليق باللون البرتقالي. 


١/1081: 009677 0 550000‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


أنواع البيانات فى 18م 


هناك العديد من انواع البيانات تتعامل معها بي اتش بي ضمن اكوادها. منها الرقمية بأنواعها العادية والعشرية والمنطقية وغيرها نناقشها كلا على 


حده: 


القيم المنطقية (مصدء8001) 
نقصد بالقيم المنطقية هنا القيم التي تمثل الحقيقة ولها قيمتين فقط وهن (1536) وتعني نعم و (1"2196) وتعني لاء كما يمكننا استخدام الصفر بدلا من 
(©1915) والرقم واحد بدلا من (©150). 
مثال: 
1 4<5 11 
و' لاء5 :121 115 ' أستعام سعط 


؟' لفتتلوء :1ه اع للقصدهد 115 ' أستام ع15]آ1 


لاحظ مثال بسيط حول استخدام بسيط حول القيم المنطقية وشرح المثال في حالة كان الرقم الذي سيكون في 4 أكبر من ه إذاً أخرج جملة (إنه أكبر) 
مالم اخرج جملة (انه أصغر او يساوي). لا تستخدم بكثرة في برمجة المواقع الالكترونية وغالبا ما تستخدم في لغات أخرى بكثرة مثل لغة (1713). 


يها ع هو - 
قيم الأعداد الصحيحة (15ء12]68) 


هي الاعداد الصحيحة او الاعداد التي لا تحوي كسور مثل )١7757(‏ »2 (7؟57١).‏ 
قيم ال(1"1026): 
هي القيم والاعداد التي تحوي كسور وفواصل وتستخدم هذه القيم لحساب المسافات والقيم النقدية. 
قيم السلسلة (ع5)1): 
قيم تسلسلية من الاحرف او الارقام. مثل: (ع 121281128 1:051:2121125م 2دع"ع وز 21312) (١‏ 9919112159 ). 
مثال في بي اتش بي : 
:' 75131 '-95121116 
علتقمة مطاعء 


كما تلاحظ عرفنا متغير (©42) وخزنا فيه اسم (114ون57) ويعتبر هنا من نوع (128:):) وبعده طلبنا من خلال امر الاخراج بإعطائنا القيمة التي 
بداخل المتغير والاسم. 


1527100 0 00967 :|| 1/08 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


البيانات المركبة زدعم:15 12262 0122011110)) 


من خلال تركيب البيانات نستطيع تجميع بيانات من نوع معين في اطار أو كيان واحد. 
المصفوفات (227:5) 
المصفوفات ونستخدمها في تجميع عناصر من نوع معين فيها وترتيبها والرجوع إليها بطريقة محددة. وكل عنصر ضمن المصفوفة له رقم معين 
كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال على ذلك: 
"عدن" - [0] عع روطو 
: "صنعاء'"' - [1] 8210712 
؛ "الحديدة'"' - [2] 920126 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (217031226) وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 
ففي المثال [27071©]0 يمكن تفسيره كالتالي ( المصفوفة »2:09:20 ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 
المتغيرات (دع21251د17) 
تبدأ المتغيرات دائما بعلامة الدولار (5) والمتغير عبارة عن مكان في الذاكرة لخزن قيمة معينة سواء كانت رقم او نص او غيره. ويمكن تعريف المتغير 
بأي اسم امثلة على ذلك: 
' كتاكنال؟ '- عسمدة 
' 120 ' - «رمامعة 
' 2000 ' دررولووة 
كما تلاحظ في المثال نقوم بعمل متغير بأي اسم وقبلة علامة الدولار إشارة للسرفر بأنه متغير ثم نضع ما نريده في المتغير. 
أنواع المتغيرات : المتغيرات نوعين (متغيرات محلية - ومتغيرات عامة ). 


طبعا في بعض المواقع الالكترونية او البرمجة بشكل عام تحتاج لتعريف متغيرات بكثرة وأحيانا المتغير تحتاجه في الصفحة كاملة ويتم تنفيذه كذلك في 
اي سطر في الصفحة هنا نسمي المتغير بالمتغير العام او الشامل (©72131211 210521)): بعض المتغيرات نحتاجها في جزنئية معينة او لوظيفة محددة 
لذلك نعرفها داخل نطاق محدد لاستخدام التعريف للمتغير ونسمي المتغير هنا بالمتغير المحلي (5ع121تد2؟ 1021). 


550000 0 00967 :|| 1/08 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


التعبيرات (5:1505دء1م:1) 

نستخدم التعبير في البرمجة لتوجيه الصفحة او السرفر لعمل أمر معين ولابد من طريقة للتعبير عن ما نريد بتعبيرات محددة في البرمجة. وسنتعلم هنا 
بعض اساسيات التعبيرات المنطقية والرياضية. 

المُعاملات (076121205): 


هي تعبيرات عن مدخلات او قيم معروفة أو غير معروفة ويتم تعلمها في الرياضيات في المدارس (س) و (ص) أو (©) و (9) ونحن لنا استخدام مشابه 
من حيث المعنى او الشكل ولكن استخدامنا مختلف من حيث الغرض ايضا سهل ونستخدمها للحسابات وللقيم والتكرار فقط. هي نفسها متغيرات ولكن 
عند استخدامها رياضيا وحيازتها لقيمه وقيامها بمهمه معينة نسميها (1220ء00). 


أمثلة : 
0هناعم0 عط 15 52 // تججوة 
5 :21 57212 320 57211 رسسادة // :7212 + 57211 - ستاوة 


في السطر الأول ++88 متغير يقوم بعمل زيادة بمقدار واحد وهو تعبير ايضا يساوي 8+1؟ » ايضا «درة8 و50211 كلاهما يقومان بمهمة معينة بدون 
استخدام ارقام محددة وهنا تكمن الفائدة. 


العوامل (0761:26015): 


هي تعبيرات رياضية تقوم بعمل (221101) معين مثل الطرح الجمع الضرب وغيرها. والجدول التالي يحوي العوامل: 


711000 #0 009677 :6 || 08/ا 
امه أعم.وأم داءعع]©0)مز :اتدمع ‏ 772755202 2:00967 8|118 0لا 


ع05منام االالأواءوووم مم0 


0ه تأسماأكص] عو زط0) ذلا ليحلنا 
أمتام رع طناك دامأووع :]1 دا 
ع10511ع راع عدع 110 
غ11 1ع ع6 ,الع تع ع1 8101 عواسح0اط ,1101 صسدعامه8 
51610 181101 
115 260013ء 11م انتحط ,دمزأئتزر]1 
م ام بتامنأع 3 طناك ,161011 00م 
(عسااطااط) خطئت النطد بااع1 كناك 
0غ لقتاوع 01 صقطا تعأمعقع سقط تتعتأدعضع ,مغ لمتتوع ده قط د5د5ع1 سقط كدع.] 
0غ لقتاوع غ201 كأ ,0غ لمعتاع10 كا ,0غ لقناوهة غ204 15 ,0غ لدتاوع 15 
01 عسأتخطاط ,2017 عوتتخطااط ,رالالق عدا لالظ 
01 صدعاهمه8 ,لاللف صسدعامه8 
12601عم0 اقرع 1" 


5 1ع لمع أكقام 


8 صدع1[ه800 ,201 صدعامه8 ,الف صدء1ه0ه180 


حم هتممع5 درموأووع :]1 


كما تلاحظ الجدول أعلاه يحوي عوامل كثيرة منها ما تعرفها مثل الجمع والطرح والقسمة ومنها ما هو تعبير منطقي مثل ((4771) والتي تعني (و) 
وايضا (*01©) وتعني (أو) ونستخدمهما في المقارنات. 


عوامل الانسناد أو التعيين (015غ12ءم0 أدمع رمع 8551 ) 


عوامل الاسناد ونقصد بها العوامل التي تقوم بإسناد قيمة او بيانات لمتغير معين وتعرف ايضا بعوامل التعيين او الاسناد المختصرة, فمثلا لو أردنا عمل 
أمر للبرنامج بإضافة رقم معين وليكن 7 هناك تعبير مختصر لذلك وهو (7- + 59) هنا أمرنا البرنامج أن يزيد القيمة الموجودة في المتغير 8 بمقدار 
/. 


وهنا جدول مشابه للمثال الذي ذكرناه: 


ل 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


0010 اعم2 ا عام قاع 

5 0113[15» 53؟ الوثاو داف وا 5 - 53 

5 15اآم 53 113[15ن» 53 1ع تع 2551 -800161011 5 -+ 53 

5[ 1160م [ناحط 53 5لهتاوء 53 112261011-5511 م3111 5 -* و5 

53 /- 5 1011151011-35511 1 53 011315 53 0111060 5 

115ل 12660ع26ع2زم» 53 11215ن»ع 53أ 0011226611361011-5518112116) 5 -. 53 


العوامل المنطقية (6722:015م0 21غ1.081) 
تعرفنا سابقا على العوامل الرياضية الطرح الجمع المساواة: هنا سنتعلم ايضا العوامل المنطقية وهي مشابهة للعوامل المنطقية الى حد ما وتلعب دور 
كبير في تطبيقات ال(م:1م) وتدعما في اتخاذ القرارات في تنفيذ اوامر صفحات الويب وفقا لقيم المتغيرات. مثال على ذلك: 

121:51 15 7 (1:)110 "7<1 راللى 16 <7 11 


أحد العوامل المنطقية هنا هي ((4701) وتعني (و) ويمكن التعبير عن المثال كتابيا (اذا كان اكس اكبر من 7 و سبعة اكبر من اف اخرج عبارة ٠‏ تكون 
الاكبر).وكما شاهدت مثال بسيط وتعبير بالعوامل المنطقية سهل جدا. وهنا جدول يعرض التعبيرات للعوامل المنطقية: 


00600 اع26 ا عام 

عنتتا عت 56 30 53 لاط ]أ ذل مالم ؟ 88 3؟ 
عنتنا ع2 مذ 3120 53 طغوط أ عتكرا” ملق م5 زللة 53 
عنح كذ مذ 02 53 تتعطااء ]أ عن 0602 م5 || و5 
عنتنا كأ مذ :01 53 لاع أزء ]11[ 11116 028 ؟ 08 3؟ 
1 غ20 15 52 11 11 الإق ١‏ ؟! 

1 غ120 15 52 11 111" الإق ا ١01‏ 

عنتنا 15 مد تإلحده نده 53 تزلحاه غ1 عنحذا" 08 عزون اعد 5 08" 53 


ا ل 0 /00967 :عا اا8 اا 
١ -‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


عوامل المساواة (015غ12ء م0 80112117) 


عوامل المساواة كما في الجدول التالي تستخدم للمقارنة بين قيمتين واختبار التكافؤ بينهما. 


001 اعطة ا دااء ريك + ا 
خطع 1ه 7اأناوع عه اذ له 53 11 عتحر]" 0 لدتناوء 15 0؟ د و5 
م5 0غ لقنانع 2014 15 52 11 عددح1" 0 لهناوع غ70 15 ؟ -! 5 


م عتطدة5 عط عنتقط 5 لحنت 53 2:0 أدع له 1تتتوع عتنه اذ 0ت 53 ]أ عدحر]" 0غ لمع تأصعل1 15 50 --د- و5 


00 0 /00967 :عا |08 اا 
0 َ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 1 اا8 ٠/0‏ 


قواعد التحكم (دع1011أ5001 002601) 


ضمن صفحات البرمجة توجد الاكواد التي تتحكم بصفحات الويب ضمن البرمجة وفي تنفيذ البرامج والتحكم بها من حيث التوقف والتكرار والشرط داخل 
الاكواد تحتاج لتعليمات أو اكواد برمجية نسميها هنا (5111124011:©5 021401)) قواعد التحكم وسنأخذها هنا بشكل مختصر كلا على حده. 


تعليمات الشرط (2)5ع داع 52 60016621) 
نستخدم تعليمات الشرط للتحكم بالاكواد من حيث تحقق شروط يقابلها تنفيذ أمر معين وفي حالة المخالفة للشرط يكون هناك تنفيذ أمر آخر وهنا تكمن 
تعليمات الشرط ومنها: 


تعليمة 1) خراء مدع غد5 1ز ع1" 


بالعربية معناها (إذا كان) وهي الاكثر استخداما وسهولة في لغات البرمجة للتعليمات البرمجية الشرطية وصورتها العامة : 
(صمتووع:1معء) 11 
( اتلاعصسعنواه ) 


كما تلاحظ التركيب العام او الصورة العامة للكود الخاص بالشرط. ومعناه هنا (14) وتعني إذا كان جملة الشرط (1©55102مء) متحققة فإن الأمر هو ) 
( 5636612176. وطبعا هذه صورة عامة وليست اوامر فعليه وسيكون لنا تطبيقات قادمة على ذلك في المواقع التي سننشئها. 


تعليمة (ه15ء) ا اعددء])5)2 عواء ع1" 


جاءت تعليمة (©و1») تكملة لتعليمة (16) أي ان تعليم (14) تقوم بعمل شرط معين فإذا تحقق الشرط تم تنفيذ الأمر المعين منها. ولكن هنا حالة ناقصة في 
حالة لم يكن الشرط متحقق فلن يتم اتخاذ اي إجراء بديل لذلك جاءت هذه التعليمة تكملة لل(14) ومعناها (وإلا أو مالم). ومثال على ذلك: 


(صمتووع:1مرعء) 11 
( 2اعتمع)واد! عفاء ( 1 امعد فوأاد) 
وتعبيريا : إذا كان الشرط (10:1ووع1مء) متحقق قم بعمل الامر (5]26©1226241) مالم (عو1ء) قم بتنفيذ الامر (5)2]©22©7212). 
تعليمة وإلا اذا كان (7عمددء)5)2 كأءداء 16) 


اخذنا مسبقا (16) و(»15©) ولو لاحظنا انهما يعملان على شرط واحد فقط. هنا لدينا تعليمة شرطية جديدة وهي (615©14) وهي اضافة للشرط (16) ونعني 
هنا في حالة كان لدينا شرط معين وفحصنا هذا الشرط ودخلنا في أمر الشرط وكان لدينا شرط آخر ضمن الشرط الاول فإننا نستخدم هذه التعليمة لعمل 
شرط آخر ضمن الشرط الاول ومن خلال المثال التالي تتضح المسالة: 


(صمتووع:1مرعء) 11 


( 1أمعصمعنواه ) 


(صماووع:1مدء) لاعكاء 
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/ا١ ١‏ 
( 212عصمع نواه ) 


( 3اتاعسمعاواه ) عواء 


كما تلاحظ المثال أعلاه أضفنا التعليمة الشرطية (1) والشرط (01©551012ه) في حالة تحققه يتم تنفيذ الامر في (5)3667216261) ثم بعد ذلك اضفنا 
شرط مستند على الشرط السابق وهو (12عو1©) ويعني والا اذا كان (1©551012م©) الذي هو الشرط الثاني في حالة تحققه يقوم بتنفيذ تعليمة 
(2626262)؟) مالم (6و1ء) ينفذ تعليمة او امر (5]36©12©72]3). 


تعليمة التبديل ادع ددع]5]2 طء]1رد عط1) 


تستخدم تعليمة التبديل (957161) للمقارنة بين عدد كبير من القيم شاهد المثال: 


(إامعع52) طع1 لوو 


©2356 "6575 '': 

:'' <م/>01:10؟7 ع1 21:011110 عتقتداء فط «'أهط 11 <م>'"' ماعء 
4 ابت 0 

:' "لاطأو" عقو 

؟'"<ر/كاموءع10 (زلكاعء؟7 تدجدهل؟ <م>" ماع 
جعلد2ع151 

©2356 "52015 ': 

و''<م/>د5اطع تلطاعتط 5ا01م5 أد5ع)2.آ<م>'"' مطاعء 
جعلوع151 

التلعكك 

<م/>عالد طع8؟ تود 6غ عدسمعاء 177 <م>'"' ملاءء 


) 


من خلال المثال في السطر الاول افتتحنا بالتعليمة «[عغ5571 ثم العنصر (402668017)) الذي سنقارنه بالشروط بداخل التعليمة 5712012 ثم ندخل 
مباشرة للسطر " :"176261161" 2356 ومعناها في حالة ما بداخل العنصر يساوي 76211:1 نفذ التعليمة او الامر في السطر ؛ ثم 1ع ومعناها 
توقف. اذا لم يتحقق الشرط ينتقل للذي بعدهء في حالة لم تتم الشروط كاملة يصل للأخير 06121116 وينفذ آخر تعليمة أو أمر. 
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تعليمات الحلقات او التكرار (5أ2262ءغ562 ع دأم00ه.1آ) 


تعليمات التكرار او الحلقات هي عملية تكرار لتعليمات محددة الى ان يتحقق شرط معين وهناك عدة تعليمات تعمل ضمن التكرار او الحلقة ومنها: 
تعليمة ع انط (أتاع تناع 52 عالطتر عط1) 
(1711) معناها (عندما يكون) وتعمل على التكرار وبتنفيذ عدة تعليمات او اوامر بعد تحقق شرط معين وعند الانتهاء من هذا الشرط يتم الخروج منها 
والتعبير الرئيسي او العام لها كالتالي: 

(ماووع:1مرعء) علنطىر 


( كاأتاعتة)5)3 ) 


كما تلاحظ الشكل العام ل7712116 وكأنها تقول للسرفر عندما يكون (01-55101:©) نفذ لي (5]2]61261265) التعليمات او الاوامر. 


تعليمة عاخطانةا 00 دع تدع ج56 عاتطتر مل عط]1) 
تعليمة ال7:1116 00 تعمل نفس عمل ال01116؟ بخلاف أن الأولى تقوم بالتحقق من الشرط ثم التنفيذ أم 77111 10 تقوم بتنفيذ الاوامر او التعليمات ثم 
تنظر لتحقق الشرط فإن خالف الشرط توقفت وإن تحقق الشرط واصلت تنفيذ التعليمات وصورتها العامة كالتالي: 
(5]2622215) 00 
51012(5وع*1معء) علتطى 


كما تلاحظ الصورة العامة ل1116؟7 010 في البداية أمر 00 وهي امر بالتنفيذ ل(5)206716205) تعليمات ثم ع1ؤط؟7 عندما يكون أو يتحقق الشرط 
(2وؤأووع:1مء). في حالة عدم تحقق الشرط لا يرجع لعمل التعليمات مرة آخرى عند تحققه يرجع ل 00 وهكذا. 


تعليمة (01]) () 512122212 101 ع1) 


تعليمة :#0 من أهم التعليمات التكرارية المستخدمة في البي اتش بي وغيرها من لغات البرامج وتقوم بعمل تكرار لعدة مرات بواسطة شروط محددة 
وصورتها العامة كالتالي: 

(5510823ع1دء 108225ووع1مده 215م1ددع1مء) 101 

( كأسعص)صة)5) 


كما تلاحظ تعليمة :0 أو حلقة :م8 ثم ما بين القوسين 1©5510121يزه الشرط الاول و15510122ندء الشرط الثاني و71©551023© الشرط الثالث 
ثم عمل التعليمات (5]20612611]5). 
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الدوال (كده6ء10]) 


تساعد الدوال في إنجاء مهام كثيرة ضمن البرمجة بشكل عام وتحتوي لغة البي اتش بي من منات الدوال الجاهزة لتقوم بمهام محددة ومعينة. وهناك 
دوال ننشئها نحن لتقوم بمهام معينة وتعمل بالشكل التالي: 


لأن المواقع والبرامج احيانا تتطلب مهام مكررة ومعقدة اتت هذه الدوال لتحل هذه المشكلة ولتوفير الجهد ونقوم بعمل دالة وهذه الدالة نقوم بتعريف 
المتغيرات الخاصة بها مع المهمة التي ستقوم بها وتكون هذه الدالة في صفحة ويب ثم من أي مكان نريد عمل مهمه هذه الدالة نستدعيها فقط استدعاء 
ونعطيها المدخلات ولا نحتاج لعمل المهام في كل مرة وتعقيد الاكواد كلما تطلب الأمر. 


مثال على الدوال : 


دالة (0019): وهي دالة تقوم بحساب (أس الاساس) مثلا 5 أس ” يساوي ١١5‏ لأن ه ضربناها في نفسها ” مرات حسب الأس كما تعلمناها في 
المدارس. قم بعمل الكود التالي داخل صفحة البي اتش بي وانظر النتيجة: 


<2: (5,3) تامم مطعهة ددم > اكيم 


طبعا ستتساءل كيف تم ذلك وعلى أي أساس. دالة (7039) موجودة في لغة البي اتش بي دالة جاهزة مبرمجة وتعرف ماهي مهمتها ويقتصر علينا فقط 
استدعائها واعطائها المدخلات فقط. هذا مثال عام وبسيط حول الدوال وهناك دوال مهمه سنستخدمها فيما بعد في عملنا على المواقع بلغة البي اتش بي 
هذا بالنسبة للدوال الجاهزة نأتي إلى طريقة عمل دالة من عملنا نحن. 


القيام بإنشاء دالة واستدعائها 
سنقوم بإنشاء دالة تقوم بعملية حسابية وليكن عملية جمع مثلا سنقوم بعمل الدالة كما في الكود التالي: 


(ط؟5 ,200)53 2م1عع تتتاع 29> 
1 

: ط5 + 53 > 21ع550 
"6ه :15631" مطعهة 

) 


: (60,60) 500 مطعهة 
2 


كما نلاحظ في السطر ١7‏ فتحنا لكود البي اتش بي بإشارة (7>) ثم قمنا بكتابة (80114102) وهو أمر لعمل دالة ثم (800) ومعناه اضافة او جمع نحن 
سمينا بهذا الاسم وهو متاح لأن تسمي ما شئت المهم أن لا تكون دالة محجوزة وموجودة في البي اتش بي ثم فتحنا قوسين بداخل القوسين (95 , 92) 
عرفنا متغيرات ج و 7 وفصلنا بينهما بفاصلة والمتغيرات هذه مهمه لأنه هي من ستستقبل المدخلات والقيم التي سنعطيها للدالة. 


في السطر 4 ١‏ عرفنا متغير 8601481 وهو المتغير الذين سنضع فيه مجموع المتغيرات 89 و 88 ثم قمنا بعمل جمع بين المتغيرات التي عرفناها. في 
السطر ١5‏ عملية إخراج الناتج وهو المجموع في 5860431 ثم أغلقنا بالحاصرة ) عمل الدالة وهي مهمة لأن عمل ومهام الدالة تأتي بين الحاصرتين ( 1 
سطر ١‏ وسطر .١5‏ 


في سطر ١8‏ نستدعي الدالة 200 وندخل لها القيم المطلوب جمعها. طبق ولاحظ النتيجة. 


طبعا هناك دوال لها مهام أكبر وأكثر تعقيدا منها ما هو متخصص بالملفات وقواعد البيانات والنصوص وغيرها. 
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المصفوفات (811:275) 


المصفوفات (41:1:235) 


المصفوفات كما ذكرناها سابقا نستخدمها في تجميع عناصر من نوع معين فيها وترتيبها في متغير واحد فقط والرجوع إليها بطريقة محددة» وكل عنصر 
ضمن المصفوفة له رقم معين كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال 
على ذلك: 


: "عدن" ح [0] لوطه 
: "صنعاء'"' - [1] 8210912 
؛ "الحديدة"' - [2] ع10ومطة 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (2707126) وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 


ففي المثال [20331112©]0 يمكن تفسيره كالتالي ( المصفوفة »2:09:20 ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 


إنشاء المصفوفات (21:235 عستادء1©) 
يمكننا إنشاء المصفوفات بسهولة وهي عن طريقة تعريف بسيط وادخال البيانات ضمن المصفوفة كما في الكود التالي: 

20011١ , ' 50012,‏ ') نققع2ع32ة > وع1[م0ط5 
كما تلاحظ أعلاه عرفنا متغير واسميناه 412001 ثم اسندنا له مصفوفة (21:29) طبعا هي كلمة ثابته ثم قمنا بعمل الأقواس التي سيتم ادخال العناصر 


الخاصة بالمصفوفة داخلها وهم ('150011',7001]2',0001]3') ثم أغلقنا الكود بالفاصلة المنقوطة. هذه طريقة والتي شرحناها في البداية طريقة 
أخرى أيضا. 


إخراج عناصر المصفوفة 
هناك طرق لإخراج عناصر المصفوفة ومنها كما في الكود التالي: 


و5ع1اههط5 مطعهة 
:"<جط>" وطعهة 
0 وطعءهة 
: "<عط>" مقطعهة 
:[2] 50015 مطعهة 


كما تلاحظ في سطر ١5‏ ثمنا بعمل أمر بإخراج العنصر في المكان ٠‏ الموجود في المصفوفة 8500015 وفي السطر ١5‏ عملنا سطر جديد كي لا تتقارب 
العناصر مع بعضها وفي سطر ١7‏ أمر بإخراج العنصر في المكان رقم ١‏ من المصفوفة 8500015 وهكذا. لو افترضنا ان لدينا ٠٠١‏ عنصر هل من 
المعقول ان نقوم بعمل سطر إخراج لكل عنصر. هنا يأتي حل آخر سهل جدا ومما تعلمناه مسبقا وهو عمل حلقة تكرار باستخدام ( م100 10) وعد 
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إزلزالا 


من ٠‏ الى ٠٠١‏ وإخراج العناصر كاملة كما في الكود التالي: 
23٠‏ ,0012 ' , ' 260011 ') بئققع322 > و5ع001ط5 
4 (++عره : 2-جيره : 0محهير؟) رمع 


: [<؟ ] 5عامهط5 مطعهء 
: '<2ط>" مطعهة 


في الكود السابق وكما تلاحظ استخدمنا أحد أدوات التكرار الشرطية. في السطر ١‏ كما ذكرنا سابقا قمنا بعمل المصفوفة وعناصرها في المتغير 
55 ادفي السطر ١5‏ قمنا بتعريف (607) وتعلم انها تقوم على ثلاثة شروط الأول وهو بداية العد وحددنا هنا أن يبدأ من الصفر لأن المصفوفة 
محتواها يبدأ من الصفر وحددنا بالمتغير 45-0 ثم الشرط الثاني وهو إلى كم نريد العد والتنفيذ وحددنا إلى أن يصبح أصغر أو يساوي ؟ لأن العناصر 
لدينا هي إلى ؟ في المصفوفة. 


الشرط الثالث حددنا أن يزداد المتغير :4 بمقدار واحد في كل تنفيذ حتى يتم المرور للعناصر في المصفوفة بداية من الصفر ثم يزداد واحد في كل مرة. 
في السطر ١5‏ كتبنا :[980015]4:2 0120© وتعني إخراج العنصر في المتغير 98001 للمصفوفة رقم 4 » طبعا لاحظ 4 في البداية تساوي ٠‏ في 
المرحلة الأولى فتقوم ال(:401) بإخراج العنصر في المكان صفر في المصفوفة. 


في الخطوة الثانية يزداد اله بمقدار واحد إضافة للصفر ويكون قيمة اله يساوي واحد فتقوم ال(:0) بإخراج العنصر في المكان رقم ١‏ في 
المصفوفة. 


المرحلة الثالثة يزداد ال4 بمقدار واحد فيصبح قيمته ؟ فتقوم ال(00/) بإخراج العنصر في المكان ؟ في المصفوفة في المتغير ع[45000. ثم تأتي 
المرحلة الرابعة ويزداد البد4 بمقدار ١‏ فتكون القيم تساوي ” فتقوم ال2زم؟ بإيقاف العمل لأن ” التي هي قيمة البر4 لا تتوافق مع الشرط 2->2 
فتتوقف ال::م/ عن العمل وينتقل السرفر لما بعد ال:401 ويخرج منها. طبعا لم نذكر محتوى السطر ١١‏ وبديهيا ستعرف ان ال::20 تقوم بعمل سطر جديد 
في كل مرحلة وستكون النتيجة كالتالي: 


1عاممط 
2ع[أهمط 
50013 


١/0811: 009677 0 500‏ 
لام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


نماذج الإدخال (25ه" :1111/11) 


نماذج الإدخال أو ال(1"01:5 ,5113/11): من الأدوات الهامة التي تقوم بتمرير البيانات من صفحات البي اتش بي وال021غ8 إلى السرفر أو قواعد 
البيانات. ونعرف جميعا هذه النماذج التي نستخدمها في مواقع الانترنت عند إدخال البيانات أو الخيارات وسنتناول هنا النماذج لكي نستفيد منها في 
تطبيقاتنا في البي اتش بي لأنها اساس اللغة التفاعلية. والصورة العامة للفورم أو النموذج كالتالي: 


> 10110 

15م أتامرسا 

>/]0110< 

كما تلاحظ السطر الأول فتحنا كود الفورم وفي السطر الثاني نص يعبر عن نوع الإدخال ربما يكون نص أو اختيار أو تعليق وما إلى ذلك وفي السطر 
الثالث أغلقنا الفورم. 


حقول الخص (105ء11 غ:جء1) 


نستخدم حقول النص لندخل البيانات مثل الأسماء »كلمات المرورء الإيميل وصورتها العامة داخل الفورم كالتالي: 
<''اجع)'"' -1706 ]10> 


حيث :رمز معناه برمجيا اداة ادخال و عم[ النوع ومن خلاله نحدد نوع الإدخال هنا في المثال حددنا »1 ويعني نص سيكون اسم أو أي نص 
عادي. سنقوم الأن بإنشاء فورم وبداخله حقول نص 156101 1766 وكما في المثال التالي: 
حتتعدمع > 11 
</ طط> </ "27202 25 231"-23112 | "ععزمع"-212522 عتانرت 3>: عتردلة |[ رساك 


</, "ةق 2ع 35 231126-71 "2125-7626 علاط 1>: عتتة1ظ1 1:35 . 
<20213 / > ل عام 


كما تلاحظ في الكود أو المثال السابق في السطر ١١‏ تم افتتاح الفورم » في السطر ؟ ١‏ كتبنا نص عادي : ©دمج[8 ومعناه الاسم ثم بدأنا بعمل الحقل 
الخاص بالاسم وكتبنا بين علامتي (</ > ) كود الحقل 12716 ثم عرفنا نوعه "2776-6020 من خلال الخاصية ع7 و )»2 تعني نص. ثم اضفنا 
خاصية ال2:0: وهي خاصية لتعريف اسم الحقل وهي ميزة مهمه للمبرمج للتمييز بين الحقول وهنا سمينا الحقل 151563226 من دون فراغات وهي 
تسمية منا نسميه كما نريد كتلميح باسم الحقل ثم أغلقنا حق الادخال. 


في السطر١‏ نفس العملية السابقة كتبنا نص عادي :312 1,354 ثم حقل الإدخال وعرفنا نوعه على انه نص ثم اضفنا له الاسم الذي نريده ثم أغلقنا 
الحقل. وهنا نصل لنهاية الفورم في السطر ؛ ١‏ ونغلقه. وستكون النتيجة بعد التطبيق والحفظ كالتالي: 


|: عتصدلحة 


|: عدا :25.] 


أنواع الحقول : طبعا هناك أنواع للحقول بالنسبة للمدخلات فهناك النص العادي (20ع)) كما في المثال وهناك البريد الالكتروني (22211©) وهناك كلمة 
مرور (725513901:0). لذلك تلاحظ أحيانا أن المواقع لا تقبل منك الايميل الذي تدخله بشكل خاطئ او متحايل. ايضا كلمة المرور عند كتابتها لا تنظهر 
الأحرف. قم بتجربة الأنواع المذكورة بدلا من )2غ ولاحظ الفرق. 
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ركذلا 


أزرار ال(23010 ) 


ايضا من انواع ادوات الادخال (1811605 1+92010) وصورتها العامة : 
<''2010'' -6م7) اناممل> 
وتستخدم للاختيار الوحيد من بين الخيارات مثل خيارات ذكر وأنثى شاهد تطبيق الكود: 


جتاع هخ > 

260 

11" ->-77311142 "عه 231716-75 605-2501307 انامط12> 
1<" 520216 2 7731112-77 "جرع 237112-75 2530307" مزاع طتامم 1 > 
حمتعامع // > 


من خلال الكود أعلاه تم عمل الفورم الخاص بالجد11440! 72010 في سطر ١‏ فتح الفورم »السطر ١8‏ كتبنا نص عادي يشير الى بيانات الازرار نفسها 
وكتبنا الجنس (9©2) أو النوع »في السطر ١5‏ بدأنا بعمل ازرار الراديو كتبنا 4ن ممرة> ثم حددنا النوع 2010 ثم الاسم ثم الأهم القيمة (ع211) لاحظ 
في الحقل الخاص بالنص لم نضفها .لماذا؟ لأن النص الذي سيكتبه الشخص في الحقل هو القيمة (©210/) أما هنا فقط سيكون المتاح هو الاختيار لذلك 
نضع القيمة نحن فنضع هنا القيمة تساوي (72816) وتعني ذكر وتخزن في الزر نفسه وفي حالة تم الاختيار عليه تقوم قاعدة البيانات باستقبال القيمة 
(©210؟) وهي الذكر . ثم نغلق الزر الأول. ثم في الأخير كتبنا نص عادي للشخص ليفهم أن الخيار هو للذكر 311216. 


في السطر ٠١‏ بنفس فكرة الخيار الأول مع اختلاف قيمة الزر (6612216)» ثم أغلقنا الفورم في سطر .7١‏ سيكو الشكل كما في الصورة : 


علقدمة 2 ا علولا ا“ عرم5 


خيارات الروع:0 طكاءععط0)) 


تسمح للمستخدم بالاختيار أو عدم الاختيار من الخيارات المتاحة وصورتها العامة: 
<''::0طءاععطاع"'' -706 نام 10> 


نستخدم خيارات (012601250) لعمل استبيانات أو أخذ معلومات بسهولة من المستخدم ولدينا مثال هما حول كيفية عملها وهو سؤال عن وسيلة 
المواصلات مثلا وكما في الكود التالي: 


<221 ه120 > 

1225202: 

عت0</ "عرون”"-731116 "اعتوطاء 6 تان ”-2371:6 "عتمطاء6 تان ”6156-7 6تام12> 
1< / "ع31ط"-7731112 "عتوطلاء هع لان "237216-7 "عتوطان م لان "25ج 5نام2 13> 
جماعهخ /> 


3 
4 
5 
ك 


2 
2 
2 
- 
2 
5 
2 
3 
2 


بنفس آلية عمل الأدوات والأزرار السابقة في السطر "3 بدأنا فتح الفورم »في السطر ؛ ؟ كتبنا نص عادي للإشارة إلى المطلوب من الاختيارات وكتبنا 
(3252010)) وتعني وسيلة مواصلات. في السطر 5؟ بدأنا عمل الخيارات اخترنا النوع (:0ك1[ععطء) ثم الاسم ثم القيمة وهي ألأهم هنا ووضعنا 
القيمة (:02) وتعني سيارة ثم أغلقنا الاختيار وبعده كتبنا نص عادي بأن الخيار يخص السيارة. في السطر 7١‏ تم عمل الخيار الثاني بنفس طريقة الأول 
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باختلاف القيمة والتي هي(عء!1ر!) وتعني دراجة هوائية ثم أغلقنا الخيار, واتبعناها بالاسم .1811 للإشارة لاسم الخيار أو قيمته. وسيكون شكل الخيارات 
كالتالي: 


ععلاظ نا عهن) نا خؤمصكصة: ]1 


زر الإرسال (دمغغن8 غتسصطان5) 


نقوم بإرسال البيانات إلى السرفر عن طريق زر الإرسال ويكون الزر موجود ضمن الفورم لأي أدوات إدخال سواء حقول نص أو خيارات أو بحث أو 


غيرها. وصورته العامة: 
<''اتسسطنة"'' -6م7) انام > 


يكون الإرسال بعد الضغط على الزر إرسال (501:216) فيقوم بعمل إرسال جميع بيانات الحقول او الاختيارات إلى ملف الأكشن في بداية الفورم (لم 
نتطرق اليه) وكما في الكود التالي: 


<”0686"->2200 212 "2طم. 35102_نتتده2 ” >052 3261 " تاناطط 1" -23716 لاه > 
<"2 6 115" 61225-75635231 انام 2 1 > . : عتتتقط عد 115 

<"2 1لننطنا5 7 ->7321116 "2 قنتنطنة5 " ->6 652 1315م 12> 

خمحدمع // > 


من خلال الفورم أعلاه » في السطر ”١‏ تم فتح فورم تم تسمية الفورم ب1016ممة ثم خاصية :2010 والتي تحدد الصفحة التي ستقوم باستقبال البيانات 
وهي «طام.«و1)ءج_دم-رمع ثم عمل خاصية 264100 والتي تحدد الدالة التي يتقوم بأخذ بيانات (سنتطرق لها لاحقا). 


في السطر ؟” تم عمل نص عادي 128:36 1791 ثم بدأنا بعمل الحقل لعمل نص معين مع النوع والاسم. في السطر 7" نقوم بعمل الزر (/قتتدطناة) 
حددنا النوع ب()زددورطنه) ثم القيمة وحددنا ()نددطنو) ايضا ويمكنك تغييرها بالعربي إن شئت. ثم أغلقنا الفورم. وسيكون كما في الشكل التالي: 


ملاحظة : في حالة عدم كتابة ال2106؟ للزر بشكل أتوماتيكي يتم إنشاءها في المتصفح وباللغة العربية إذا كان متصفحك عربي وباللغة الإنجليزية إذا 
كان انجليزي وهكذا حسب لغة المتصفح الذي تستخدمه. 


القائَمةٌ المخنسدلة ()115 0010-م011:0) 
من الأدوات الهامة في الصفحات التفاعلية والتي تتيح للمستخدم الاختيار من بين القائمة المنسدلة والصورة العامة كالتالي: 


<اعع1عو9> 


<07201011/> 2ع تتاء لآ <'' لاعططع؟'' -21116؟ 0101م0> 


<اعع1ء5/> 
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كما تلاحظ الصورة العامة للكود نبدأها بال<0ع9616> ثم نبدأ بإضافة العناصر التي ستظهر للمستخدم من خلال كود <0714102> هنا قمنا بعمل الخيار ثم 
القيمة وعينا (»ددع9) ثم إغلاق البادئة ل<110م0> ثم النص الذي سيظهر للمستخدم ثم إغلاق ال102)م0» ثم كتبنا النص الذي سيظهر للمستخدم 
(2»دمء77) وهي التي ستظهر للمستخدم, ثم أغلقنا الدره41م0 ٠‏ إذا اردنا زيادة خيارات نكرر ال07410 في السطر الأخير نغلق ال6ح»5©1. وكما في 
الكود التالي: 


جتاع مع > 
<56161> 
<102: مده / عدع 0ظق< "2م30 " -721112 2ه310ئ2مده > 
<5102 طزه />ق ' 8238<55238 5 " >5731116 05553162> 
<251602 هزه /عطط1<"طط1"-7321116 2ه610هزه> 
<02 51 جه / >ئ أتتطة1!< " 6 1 تتطهد" ->721116 2ه610هزه> 
<6ءه1ع5 /> 
خلا هخ / > 


ادف 0ل 


0 


ن) ذ) ذب) كير كير كير كير ظر 
شمر يم 


4 كل 


كما تلاحظ الكود بدأنا بفتح الفورم ثم بدأنا بعمل القائمة المنسدلة <6ع95616> ثم عملنا الخيارات عن طريق 001410 وإدخال القيم والنصوص التي 
ستظهر للمتصفح .ثم إغلاق القائمة المنسدلة <)9616»0/> ثم أغلاق الفورم. 


سيكون شكل القائمة كالتالي: 


منطقة الخص (2:22 غ<ه]) 


نستخدم الج©:202)21 للنصوص المطولة والتي نلاحظها في المواقع مثل التعليقات مثلا نضع التعليق في الحقل المناسب ويسمى ب212 )ع1 وصورته 


العامه: 


<".. ''دولق '".. ''-1:0185 12191:29> 
كما تلاحظ الصورة العامة بدأنا بكود جع:17<]21> ثم خاصية 2.75 وهي لتعيين عدد الصفوف وثم 015 وتعني عدد الأعمدة. وكما في الكود التالي: 


<21 ه20 > 

<”5-2”40 1و ”2075-57 1612532683> 
اكتب التص هتا 

<3ع2 3 عهزء ح / > 

<2 هع /> 


كما تلاحظ الكود أعلاه في السطر 47 تم البدء بعمل الفورم ثم في سطر 8 ؛ البدء بالوع:2)21©) وتم تعيين عدد الصفوف ("5'-1:0175) وحددنا خمسة 
صفوف عملنا خاصية عدد الاعمدة ايضا ('40"'-015ح) وأغلقنا البادئة. في السطر 414 عملنا نص كملاحظة للمتصفح ويمكن عدم كتابتهاء في السطر 
٠ه‏ أغلقنا الوعج)يره) والسطر ١ه‏ أغلقنا الفورم. وسيكون شكله كما في الصورة: 
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١ا١5ك‎ 


اكتب التص هتا 


دالة 95_2051 95_61 


دالة 5_011؟ 


نستخدم هذه الدالة لتمرير البيانات من صفحة إلى آخري بكل سهولة عن طريق استقبال البيانات عبر المتغيرات وفيما يلي مثال حول كيفية نقل البيانات 
واستقبال الدالة '8_©191 لهذه البيانات علما أن البيانات التي تنقلها لصفحة آخرى تكون ظاهرة في رابط الصفحة بعد التمرير وهو الفرق بينها وبين 
1 


سنقوم بعمل تمرير لبيانات من خلال صفحة فيها فورم يحتوي حقل للاسم والبريد الإلكتروني وهذا الفورم يوجه هذه البيانات لصحفة أخرى فيها دالة 
'11©_ه تستقبل هذه البيانات وتعرضها للمستخدم وستكون بالطريقة التالية : 


أولا : ننشأ مجلد داخل ال7770 ونسميه )همع أو أي اسم ونقوم بعمل صفحة جديد ولتكن 1[7م.77©1207061 في برنامج الدريم ويفر والكود فيها 
كالتالي: 


<"050 . 312121311-1532151102231 / 21:10 / 1 1تتاع تطعة / 11 / 020 . 13. 7167161 / / : و6اع ط" "511 / /7 13251610231 0. 1 :711141 181 / /113/ / -" 21181.16 لسعط 5م8لا2021 > 
< "لطع / 1999 /ر وه . 173 مما / / : وزع 26" >-25 امد لسعط> 

<20هع2ط> 

</ "2-8 نط 1اتع م 5طداقطه : لتقغط رعجدمج "عع صم عدم "15ج طلم ع دهن 7-27 1 ناوه معط 53ع6 0ه 
<51516 />1 00115:آ6151<11151> 

<مدعط > 

<"6عنو"-612200ع71 2227 . عتامن 761" >36510121 1ه > 

<2ط><"عنتة2" -23716 "6632656 ”6106-7 اتام 31> : عسولا 

<2ط><*”11هتته ”-23716 "2156-5615 5نام2 31> : 1 1ذهده-2آ 

<”"2 خ1نقطنا5 "- 52125 26نام12> 

حتدمع / > 

<0017ط> 

>/200177< 

<لضطط > 


هذا الكود في صفحة 1[7م.7761201261 وكما تلاحظ فورم عادي كما تعلمناه مسبقا والمهم هنا أن تلاحظ الخاصية 20102 في سطر " حددنا اتجاه 
تمرير البيانات وستذهب إلى صفحة «رام.»1«مء771 »حددنا الطريقة 70241800 وهذه الخاصية تطلب منك الطريقة ونحن حددنا طريقة أو دالة 
'17©_هؤ كما تلاحظ. وهي صفحة أخرى سنقوم بعملهاء وايضا مهم ان تلاحظ خواص ال20ج:: للحقلين جعلنا لكل منهما اسم احدهما 2ه والآخر 
نهد ويعملان بنفس طريقة المتغيرات يتم خزن البيانات التي سندخلها فيها. وسيكون شكلها عند التنفيذ كما في الصورة: 


ةا 


تلتدحص-1]8 


إرسال 


ثانيا : نقوم الآن بعمل الصفحة الثانية «ام.771207 ايضا بجانب الصفحة السابقة في مجلد 4م و سيكون فيها دالة 1577 8_6 وكما في الكود 
التالى: 
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نا 


<"050 . 15301231 5223315 -3221011 /10110 /11قط طعة / 118 / 02 . 1613. 6اتماتما /, / : و6 عط" "11ظ / 12832515102317 0. 1 :71111 111 / /113/ / -" 2108116 لمسعط طلا 2021 ؛ > الحاء 
<"701 تع / 1999 /روع<ه . 7076.113 / / : واعط"-125ممد للسعط> | بس 
<0هعط> 3 
</ "2-8ط عع 25 قط :20701 رع عرعج "-5 562 2م "625-11706 52-60111570025 25 لطع | 03 
<1516ع/>عتتامه 1< 51 23> | ك 
<20ع2/> | ن 
<طط><2 : ["عستفص"] 681_ءع مطوعع حيطم2> عسمع ملعا 7 
<72 :["2211ه"] 51ت_ه مطمء «رطم2> : 15 535ع3002 11هسه ناملا 8 
<0017ط> 9 
<2001/ > 


0 
1 


<لمتغط/> 


لاحظ في الكود سطر " كتبنا نص عادي وهو 776120016 وبعده كتبنا كود بي اتش بي وطلبنا إحضار ما داخل ال©26جم وهو الخاص بالحقل الاول 
الذي سيكون فيها الاسم واستخدمنا طريقة الدالة '8_02197 لإحضار البيانات الخاص بحقل الاسم لاحظ طريقة الكتابة بالخاصية '9_©:1971 

نضع قوسين وفاصلتين منقوطتين بينهما وبين الفاصلتين المتغير ثم بعد القوسين فاصلة منقوطة ونغلق كود البي اتش بي. وكل حرف وكل فاصلة دائما 
مهمه جدا. في السطر ١‏ كتبنا سطر عادي :15 55ع:20011 23211» :570131 وتعني عنوان بريدك الالكتروني هوء وثم قمنا بعمل كود بي اتش بي وكتبنا 
بداخلة تفس الكود السابق وطلبنا إخراج ما بداخل المتغير 11«مع من خلال الدالة '4_©15:1 ثم أغلقنا كود البي اتش بي. 


التطبيق : نفتح من خلال المتصفح صفحة 1م.77100161 في مجلد عع من السرفر وطبعا ستظهر كما في الشكل التالي بعد اضافة الاسم والايميل 


كمثال : 


يوسف صالح) :11311 
7 8003116([/300. التهدط- 1 


إرسال | 


بعد الضغط على الزر ارسال ستقوم الصفحة بإرسال البيانات الى الصفحة الثانية [[م.»7761201 واستدعائها لأخذ البيانات وهي بدورة ستقوم بتنفيذ 
النقل للبيانات كما كتبنا الكود بواسطة '8_)7171 وسيكون شكلها بعد ضغط زر الارسال كالتالي : 


يوسف صالح عتدمعاء 57 
تامع 2(:3800/لنقتتاء :15 5د5ع5ل200 لنقتتع كتاه لآ 


ولاحظ أيضا كيف يظهر الرابط عند استخدام دالة 8#_©1577 البيانات التي قمنا بإدخالها ظهرت ضمن الرابط كما في الصورة : 


ذا دمء.ههطة/119640تجمع -1أقجمع :8 يوسف + صالح -ع70376 نامع تمع اع نا/اع و/1طاع رمدو مطاةءها 1 فض 


دالة 5_2051 


يتم إرسال البيانات من الفورم إلى صفحة أخرى عن طريق دالة 20571_9 وتكون البيانات غير مرئية للمتصفح عكس دالة 1751© 8 لدينا المثال 
التالى: 


نطبق على المثال السابق فقط نغير بدل (4عع) في صفحة «رطام.2»1:م77»12 كما في الكود التالي: 


<"0>"2056 212120 "222 . عتنلامج 5761" ->02 361 21 ه25 > 
<ع2ط><” دق 2 ” -23116 "6122-7635 طأنامت 31> : عسسولز 
<2ط><” 1 1د هتنت ”12126-56322376 عاناط2 31> : 1 دذهم-آ 
<"12مقطنا5 " -5126 2 ناط2 1 > 

ممع / > 
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١18 


كما في السطر ‏ قمنا بتغيير الخاصية 72:61100 إلى 0054 . وفي الصفحة 17م.771001226 نقوم بتغيير الدالة نفسها من '151©_©؟ إلى الدالة 
577 + كما في الصورة التالية: 


<2«ط><2 : ["عنسقفس"] 5_2051 مطعع حيطم2> عمرمت1ع1آ 7 
حل 1" 11مهمسة"] 2051_ه5 مطءه تتطم2> : 15 3002655 2211© ناملا 8 
9 


<0177ه0ط> 


كما تلاحظ الصورة تم تغيير الدالة وسيكون التطبيق بنفس التطبيق للمثال السابق وسيكون شكل الرابط بعكس دالة '8_©151 أي لن تظهر البيانات في 
الرابط . لاحظ الصورة: 


ب 9 ١‏ 3 محم .عحممعاء س/اعو/1طع ب دمطاهها جا 


لم تظهر البيانات التي أدخلناها في الصفحة المستقبلة لبيانات الفورم وظهر اسم الصفحة فقط «رطام.ع77©1©012. 
تطبيق حسابي باستخدام الدوال والكورم 


سنقوم بعمل تطبيق لعملية حسابية عن طريق الفورم الذي تعلمناه والتطبيق يقوم بعمل جمع ارقام يقوم المستخدم بإدخالها وتقوم الدالة '9_205:51 أو 
'177©)_ه بعمل التطبيق الحسابي وإخراج النتيجة والطريقة كالتالي: 


اولا: نقوم بعمل مجلد جديد داخل مجلد 779059 ونسميه 200110201012 . نقوم بإنشاء صفحة بي اتش بي 2101.01 ونقوم بعمل الكود التالي بداخلها. 


<” 200-066 2:6 ""وطج. 7"85002->51602ه36 نعد هخ > 
أدخل الرقمين لعملية الجمع 


 223112- ”1221101” /<‏ 17من1" >-6322. ا قاطت 31> :1 عدعطتتتتاط 
 223116-> "121102" /<‏ 147ن1" >- 225 نام 31> : 2 عدعطننا2ة 
</ "ع تنتطناكت " -06ا6 115ام12> 

حمتممع /> 


كما تلاحظ قمنا بعمل فورم لعملية الجمع ووضعنا خاصية الأكشن :2010 للتوجه لصفحة أخرى وهذه الصفحة تقوم بعملية سحب البيانات والقيام 
بعملية الجمع؛ حددنا اسم الصفحة وهي م.2002 سنقوم بعملها في الخطوة التالية. في السطر / عمل نص عادي والسطر ؟ عمل سطر جديد. في 
السطر ٠١‏ نص عادي في البداية وسميناه :1 21121263 اشارة للرقم الاول ثم بدأنا بعمل حق من نوع :1م وليس نصء وحددنا اسم للحقل وهو 
1 وهي الخاصية التي نتعامل معها في نقل القيم دائما من خلال الاسم. وسيكون الشكل كما في الصورة: 


أدخل الرقمين لعملية الجمع 


| إرسال | 111311 1 111133151 


ثانيا : نقوم بعمل الصفحة 21012.01 ونقوم بعملية جلب المتغيرات للحقول والقيام بعملية الجمع كما في الكود التالي: 


11000 0 009677 :6 |1081 
لامي أعم.وأم داءعع]©0)مز :اتهمع 2 772755202 2:00967 8|118 0لا 


11 


التتيحة 

</ عط> 

حرطاط2 > 

: [ " تاد" ] 65:1 _وع 3_3 
: ["ننتنتط"] 6151 _؟ع 6ك 


5 + 53 >-5 5265111 
0 
وطعهة 


في الكود أعلاه في السطر 7 عمل نص عادي وكتبنا (النتيجة) وعمل سطر جديد في السطر ١‏ » في السطر ؛ بدأنا بعمل كود بي اتش بي .في السطر 
٠‏ عملنا متغيرين هما ج94 و 45 وكل متغير استخدمنا فيه عملية جلب للبيانات او القيم من خلال الدالة '8_©:177 فمثلا المتغير 92 استقبل البيانات في 
المتغير 20211 »والمتغير 41 كذلك استقبل القيمة في 12111112 . 


في السطر ١‏ عملنا متغير وسميناه 45016 ومعناه نتيجة وجعلناه يحتوي مجموعة 42 و 88 وداخل القوسين في سطر ١١‏ طلبنا إخراج النتيجة 
(865116) والتي تحوي مجموع المتغيرين. وأغلقنا البي اتش بي في سطر .١١‏ 


نأتي للتطبيق ونضع الرقمين 7٠٠١‏ و ١5٠١٠‏ ونطبق على صفحة م1م.200 كما في الصورة : 


أدخل الرقمين لعملية الجمع 


| إرسال | 0 :2 1 1تئتا1 0 :1 عع اتتتتاز 


نضغط على زر ارسال وستظهر النتيجة التالية كما في الصورة : 


1510 ملام 7117501220 


1 : نظام مفتوح المصدر ومجاني لإدارة قواعد البيانات العلائقية ويستخدم لغة الاستعلام الهيكلية 501 ( 00619 51100160 
2128 ) وتعتبر ,501 اللغة الأكثر أهمية في إدارة ومعالجة محتوى قاعدة البيانات. 


قواعد بيانات علائقية: وتعني جداول مترابطة بواسطة علاقات (1361015) عن طريق مفاتيح رئيسية للجداول. 


سنتعلم هنا طريقة عمل قواعد بيانات وجداول وطريقة إدخال وتعديل البيانات بداية من المرفج:ه-زد«وطام ثم نقوم بتعلم كيفية إدخال البيانات وتعديلها 
وحذفها من خلال البي اتش بي وإنشاء مواقع تفاعلية تعمل بال بي اتش بي وقواعد البيانات []213950 . 


ماهو :127:20111مطام : هي اداة مفتوحة المصدر ومجانية تتيح لمدراء المواقع الالكترونية لإدارة قواعد بياناتهم (727501) 
الواجهة الرئيسية ل ند)2"تدمطم 


نقوم بتشغيل برنامج ال6161وم22؟7 حتى تظهر الأيقونة الخاصة به في الشريط السفلي لسطح المكتب باللون الأخضر. ونقوم بفتح 102110516 
ايضا على المتصفح كما في الصورة التالية: 


١/1081: 009677 0 500000000‏ 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


عع بارع كم مم ق/لا 
عكتمجووع] ومتومعلا 2.2 وملوععلا 
3 اناو 1]دره0 زع رحورع5ك 


2 : (لوتو معلا عداعهمم 
73 :ومنومعنا مبرم 


عمبك طق غ007_حرمه زا دلمعاى 3 لاأقصعط طق عو عاق : كومتعمعغمع 10300 
دمل طق طق عا طق وعاء طق عأدل طق 
عطنه اق امه 1 ملعت اق ودز طق رمعا اق 
لماوكرى طاق ] مماددع5 3 | عمم طق 
دول طق احماطنا جاع طاح 3 مد طق 0 ]| 
اد جاع ع طق اكع اذك اق داع عاق مم جو 
0 طق اوطح طق عع لمق 2ع عدمة طق ماحد جاع 000 ] 
دقام طق ء]ذاود_ملم طق اودترد_ملم اق أاودتره اق اودبرم طق 
وناطع 0< طأق 


4 : لامتوزعلا اوكلاال! 


106015 
()مكمتمطم لق 
متسل د رمام فق 


5غامع زمط2 “ناملا 
“مم3 لكا 


متادعتامم ذا 


من خلال الصورة أعلاه ستلاحظ على اليسار تحت عنوان 10015 وجود رابط ل720:010«مام نقوم بالضغط عليه وفي بعض الحالات يطلب اسم 
مستخدم وكلمة مرور كما في الصورة التالية : 


قر الااممام 
أهلا بك في 010117 لإالاام دام 


9 - لغة 


؟ 3016م - العريية 


1001 


في حالة تم ظهور الصورة اعلاه نختار اللغة العربية ونضع اسم مستخدم (20014) ثم نترك كلمة المرور فارغة ونضغط على زر (انطلق) وستظهر 
الصورة التالية للوحة التحكم الخاصة ب(71171132031:21112) علما أن كلمة المرور واسم المستخدم الذي وضعناها هي افتراضية تأتي في أي برنامج 
سرفر محلي مالم نتدخل ونقوم بتغييرها. 


١/1081: 009677 0 550000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهمع 2 772755202 2:00967 08118/ا 


لأذلا 


تفظو امام ١‏ 


ه و وه + 1 3] قاعدة ييادات 02 | الحائة 4 دودنا 59 لل تصدير 6 1ع استيراد طق الإعدادات 89 ترامن | [7] سجل ثناني إإ إستتساخ | |<؛ متغيرات | 35 مجموعات المحارف ١‏ با محركات 


ذ 2 
(الجداول الأخيرة) ... 3 


00 أ3اامء ومتاععمممء عبوع5ه © - | ؟ أء_اهعمعو_قتان ا ه حلم 102/177 18 )و0 لدعها) أده «الد0) 

٠‏ ةلالا عع قناتااهم5 

1 و ٠‏ اطت) عنقع5 اأمنممه0 الوك يلالا - وه5.5.24-1 :ممأممعن عوتطام5) 
ه نسخة البروتوكول: 10 


- 5لوملمأع5 عع مهودع ممم ٠‏ المستخدم: 7006©(102/0054 


69 كد ٠»‏ (8أنا) علمعامنا 1-8آنا تأمدوطء مومه 
اين اننا #2 © مودبو0ه ا - هلد | ؟ أطوم - العريية ا 
غم كا سمس عم سم 
له مطير: | ؟ مجمهطقص 3 
58 لاس سس 
٠ 0‏ جيم الفط | 8296 * | 


٠‏ 5.3.13/ملامص (1032//) 2.22 2/عاعومم 


لا 9ه طق 5 1 ٠‏ - 20102224 - نعل-5_0.8 لصاوديزم - أوذلزدمطنا :مادعنا أموناء ع5ه09:36 
105 016 0 5510-5-5 


٠‏ الودلام :ممتومعهره منرم ري 


3 5_رم هلمم 9 


9 
0ا134 9 
9 لا متاححعكظ راطم 
3 كا 7 5 
« 3.5.1 :171013100 5100ماع //ا, آخر إصدار مستقر: 41-8 
مهد ها ٠‏ مستندات وتائقية 
٠ 9 52‏ ويكي 
اوة 9 الصفحة الرئيسية الرسمية ل 000[0/.ث//إ|/اام11م 
٠‏ مشاركه 
0 » اجلب دهم 
ك قائمة التعديلات 
3 5 


كما تشاهد الصورة اعلاه وحسب تم الترقيم باللون البنفسجي للصورة لشرح وظيفة الأزرار الموجودة والاكثر استخداما فكما تشاهد الصورة وحسب كل 
رقم : 
(قاعدة بيانات) : من خلال هذا الزر والضغط عليه يتم ظهور الصفحة الخاصة بعرض قواعد البيانات الموجودة ضمن السرفر لديك في جهازك وايضا في 


السرفر الذي سيتقوم برفع موقعك عليه في الانترنت وتظهر الصفحة كما في الصورة التالية: 


3] قاعدة بيانات | (ل 501 ١‏ وَإوَ) الحائة | 22 5,هولا | +] تصدير | 1ت استيراد | 9ن الإعدادات | 818 ترامن | ]سيل تنائي ١‏ |إ إستتساخ | <؛ متغيرات | 2 ميموعات المحارف ١‏ 3 محركات 
قاعدة بيانات 


7 


ها وموطؤهل مهمه © 
| |" ونط_قن | (حوين) 


قاعدة اليياتات ى وونأوءذامعء ععؤودالا 


كما تلاحظ الصورة اعلاه من خلال المربع او الحقل الموجود تحت (ع0121225 ع216ع01) نضع اسم قاعدة البيانات التي نريدها بداخله ونختار من 
الخيارات المنسدلة بجانبه في حالة بناء قاعدة بيانات باللغة العربية على خيار أو الترميز («ذط_118). 


501) من خلال هذا الزر او الرابط تتيح لنا الصفحة عمل ادارة لقواعد البيانات بكاملها محتواها ولكن عن طريق استعلامات 501 وهذه 
الاستعلامات تكتب يديويا فمثلا لو أردنا عمل عمل قاعدة بيانات اسمها 50190011 نقوم بكتابة استعلام ,5001 كالتالي: 


: 520011 تاكذظظلذ 141 011411 


ونكتبه في المربع الظاهر في الصورة ثم نضغط زر تنفيذ الموجود تحت المربع الخاص بالاستعلام على اليسار: 


ا 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


لذلا 


] قاعدة ييانات | [للم 501 | وف) الحائة | 52 056:5) | 8#4] تصدير | 5 استيراد | كلق الإعدادات | 5/ ترامن | 53 سيل تناني إ| إستتساخ <؛ متغيرات ١٠‏ ك2 مجموعات المحارف ١‏ ,ا محركات 


أ05طاهع0!"” تعنمعو مه 5ع أرعنان/لمعنو 501 من8": (ق 


1 22185255 #التقموه ‏ ع 


061636 


[ عاملاعم ١‏ ] !ا عرض هذا الاستعلام هتا مرة أخرى [_| “80 /[/2لا0 581810 


(الحالة) : وتعرض عليك العمليات التي تمت واحصائيات بذلك اضافة لحالة السرفر من تناقل للبيانات وغيرها .علما اننا لا نستخدمها في عملنا عند 
انشاء المواقع الالكترونية. 


(1715625): عرض المستخدمين للسرفر والمتاح لهم الوصول لقواعد البيانات » في اجهزتنا الخاصة لا نقوم بعمل مستخدمين ونتركها كما هي الغالب 
حيث ان المستخدم الافتراضي هو (2004) وكلمة السر لا توجد. ونستخدم الصلاحيات من اسماء وكلمات مرور في السرفرات عند أطلاق المواقع 
الالكترونية وربطها بقواعد البيانات وسنتعلمها عن رفع المواقع في الفصول القادمة ان شاء الله. 


(تصدير): من هنا نقوم بعمل إخراج قاعدة بيانات كاملة بجداولها ولا نستخدمها الا بعد نهاية عملنا للموقع نقوم بتصدير او اخذ ملف كامل في قاعدة 
البيانات لنقوم بنقله لسرفر على الانترنت أو حتى الى جهاز آخر. 


(استيراد): الاستيراد عكس التصدير وهو لعمل استيراد وجلب لقاعدة بيانات موجودة كملف وهو مانقوم به في السرفر على الانترنت من جلب الملف 
الخاص بقاعدة البيانات عند آخذها من جهاز آخر. 


(الاعدادات): وهنا يمكن عمل تعديلات معينة على اندسن ع :رتسسدرطم وتصديرها واستيرادها والمزيد من الاعدادات ولا نستخدمها بكثرة في أعمالنا. 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأمداءعع]©0)مز :انمع 772755202 2:00967 8|118 0لا 


ركذلا 


عمليات 7201215تمنامطام 
إذ شاء قاعدة بيانات 


نقوم بإنشاء قاعدة البيانات من خلال دندد722320صرطام بالضغط على ( قاعدة بيانات ) ونقوم بعمل اسم لقاعدة البيانات واختيار الترميز المناسب 
للمحتوى والذي سيكون بالغة العربية كما في الصورة : 


3 قاعدة ييانات ٠‏ [لل 501 | يفي الحالة | |52 5615لا <٠‏ © تصدير | +ك] استيراد | شن الإعدادات | 8| ترام | (53] سيل تنائي ||| إستتساخ <؛ متقيرات 


قاعدة بيانات 
هذا عمهطهول عأهع) © 


11 5 _18ا | ( تكوين 


قاعدة اليياتات ى ‏ وروأغوءذامعء وعغؤودالا 


بعد وضع الاسم لقاعدة البيانات واختيار الترميز («زط_0418) نضغط على زر (تكوين) وستظهر لنا رسالة خضراء بنجاح عملية إنشاء قاعدة البيانات 
(0011؟) كما في الصورة: 
قاعدة بيانات 
ها عووطونغول عأامهع © © 


5001 ا ؟ 


قاعدة اليياتات ى ‏ (ونأأوءذامعء ععنودالا 
ا تاسنهة 


م3 يو مستنسخة 83 تحقق من !ا 


الان لدينا قاعدة بيانات اسمها (5120011) يمكن مشاهدتها ايضا من خلال زر قاعدة البيانات وستظهر اسفل حقل انشاء قاعدة البيانات وعلى الجانب 
الايمن ل:1252)011111:مطم والاستعلام 5001 الخاص بإنشاء قاعدة بيانات كالتالي: 


:11 1خ ضاخ 1 4 0111411 


ل 0 /00967 :ع |ا8 ١/0‏ 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


إنشاء جدول في قاعدة البيانات 


بعد أن أنشأنا قاعدة بيانات ستحوي قاعد البيانات على جداول حسب احتياج الموقع فمثلا سنقوم بعمل جدول ونسميه (563061205) 


لو افترضنا أن لدينا هذا الجدول : 


جدول الطلاب 

الرقم الاسم جوال العنوان ملاحظات 
١‏ صالح علي ١001‏ اليمن - امانة العاصمة لا يوجد 
١‏ ااا ليم 0 "| لضي 0000000 اللتووض 

, بل١ميمممممممممممريييججٍِل‏ لمح حب 7_<:|!//// |1 1 0000| 

0 لكَئم صمي ر5>ك كا اااسا م اا ااا ا اا 0 


وطريقة إنشاء الجدول من خلال «ند272)1مطام كالتالي: 


من خلال زر (قاعدة بيانات) ستظهر لنا قواعد البيانات تحت حقل انشاء قاعدة بيانات وستظهر لنا قاعدة البيانات (501120011) نضغط عليها وستظهر 
الصفحة التالية كما في الصورة: 


مادق فقي آ/ااممم 


[للآبتاء | (5 50 | 1 1 8 إكا استيراد | #/ن عمليات | 22 الإمتيترات | ع 095نان0 ١‏ ©6)أحدات | 32 5ووواء1 
2 2 © © 
لا توجد جداول في قاعدة البيانات هذه! 
(الجداول الأخيرة) دا 8 أتشئ الجدول 
, 50001 


الاسم 5 0ناامء أه ععطصسلةا: [ ا 


لا توجد جداول في قاعدة البيانات هذد! 


2268 13018 © 


من خلال الصورة أعلاه وتحت عنوان (انشئ جدول) في الحقل (الاسم) نكتب اسم الجدول (56106126) ثم المربع بعد النص المكتوب 04 [111136١‏ 
5 وتعني عدد الأعمدة. لوعدنا للجدول أعلاه وأحصينا عدد الاعمدة سنلاحظ أنها ه اعمدة وهي (الرقم الاسم - الجوال - العنوان - 
ملاحظات ) نكتب ه في الحقل وكما في الصورة: 


5 أتشئ الجدول 


الاسم: | 5]006/11 5 نا أ0 'عطلصونل: | 5 


من خلال الصورة أعلاه كتبنا اسم الجدول وعدد الاعمدة نقوم بعد ذلك بالتنفيذ وذلك من خلال زر (تنفيذ) وستظهر رسالة باللون البرتقال بنجاح العملية 
وستفتح لنا صفحة أخرى لإضافة أسماء الأعمدة و خصائص كل عمود ايضا كما في الصورة. 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عاونا 


أعراءه أم حاعع]©0]طأ :اتهمطع 


ع جا. 0 أم حاعع]. /الانانا نالا 


5 اسم الجدول: 5ناامء 200 
1ك قن الاامام بون: د دام 7 - 
ه 8 ١‏ 
2 ها © 1 © بناء بو 
- ٍِ الاسم توع إن الطول / القيمة إن إقتراضي إن مملغواامه الخواص ‏ خاني غهرست 1_لم عدت 
(الجداول الأخيرة) 
3 201 
لا توجد جداول في قاعدة البيانات هذه!. شاد 5 عدومام ف ب ف 0 3 
ف عامها عأهعر0 1لاا1 فو عمهلا ," ؟ ّ 3 
101 عمملم 3 ؟ ؟ 59 0 
آلا1 7 عمهلم 1 يض ؟ 5 7 
تعنيقات الجدول: عمأومع عوهرهغ5: إن مملغهاامه: 
1008 7 ,5 صاط_قنان 


مهن أملقعل 111010كهمم: ن 


كما نلاحظ الصورة تم طلب اسماء الأعمدة مع مواصفاتها ونسرد الان مواصفات كل عمود كتابيا ثم ننقلها للجدول (للتوضيح): 


العمود الأول ( الرقم ) وهو أهم عمود في كل الجداول ونسميه (المفتاح الرئيسي :ع1 '223م221) وعن طريق المفاتيح الرئيسية ترتبط جداول قواعد 
البيانات مع بعضها بالإضافة إلى أن قواعد البيانات لا يمكن أن تتخلى عن المفتاح الرئيسي للجداول وهو مهم جدا يفيد في عمليات قواعد البيانات كما 
سنتعلمها لاحقا. 


العمو الثاني(الطالب) وهو عبارة عن نص عادي وسنحدد حجمه (عدد الحروف) في الجدول. 
العمود الثالث (الجوال) وهو عبارة عن رقم وسنحدد خصائصه ايضا في الجدول. 

العمود الرابع (العنوان) وهو عبارة عن نص وارقام وسنحدد خصائصه في الجدول ايضا. 
العمود الخامس(ملاحظات) وهو عبارة عن نص طويل لأني ملاحظات وسنحدد حجم النص. 


كما في الصورة أدنا عملنا خصائص الأعمدة : 


0ر60 1 05 اسم الجدول: 5 نام 600 ) 
0 6م غ0ع0 نو ( 1 تنقية 
0 
ها © 9 © 2 
الجداو[ 0 35 ل توع له الطول / القيمة إل إقتراضي إن ممتأهااهمء الخواص إخائي, فدانيع للدت ب 
(الجداول الأخيرة 
و 
اع تنام 1لا1 , 4 عملم م 3 ؟. لكلف مم 5 
3 لماعك 
الا توجد جداول في قاعدة البيانات هذه! 030 لنستت ناا 5 55 مهل 5 5 5 ب اه 
© عامها ماوع ءانطممم ررناا ف 14 عمملةا ,_ ؟ ,5 د 0 
200 عمموعما , 66 عمملر , فو 14 ع ؟ 
00 عممععما 100 عمملر 5 , 1 ا ؟ 
تعليقات الجدول: عمأومع عوومه)5: بن مملغهاامه: 
18 ؟ ؟ ضاط_قتان 


مم أملقعل 11010 1كعمم: بن 


في الصورة أعلاه العمود الأول على اليمين تحت (الاسم) مطلوب أسماء الأعمدة قمنا بكتابة اسم العمود الأول (2111:5©1) ويعني الرقم ثم اخترنا انوع 
(17771) وتعني عدد صحيح., ثم الطول وكتبنا (4) بافتراض ان يصل الرقم الى اربعه ارقام ثم تركنا الخواص التي تليها كما هي وهي (افتراضي ‏ 


520000000 0 009677 :|| 1/08 
لامي أعم.وامحاعء1©هم]م1 :اأهمع 2 772755202 2:00967 08118/ا 


ذلا 


- 201136102 - الخواص - خالي) وصلنا لخاصية فهرست حددنا (212131412757) وتعني مفتاح رئيسي وان يكون لكل طالب رقم خاص به لايتكرر 
أبدا. ثم اشرنا بعلامة صح تحت (4_1) وتعني زيادة الرقم اتوماتيكي بمعني اذا اضفن اسم جديد يضاف رقمه بالترتيب من دون تدخل مناء وتركنا 
الخاصية (تعليقات). 


العمود (22:1) ويعني الاسم حددنا نوعه (1741+0114[12) وتعني نص .ثم الطول وحددنا (55) اي عدد الأحرف والارقام تركنا بقية الخواص. 
العمود (©20111) ويعني الجوال ثم حددنا النوع (17271) ويعني رقم وحددنا الطول ١4‏ رقم وتركنا بقية الخواص. 
العمود (20017:55) ويعني العنوان حددنا النوع (17818011/12) وتعني النص وحددنا الطول 55 حرف وتركنا بقية الخواص. 


العمود (©201) ويعني ملاحظة حددنا النوع (174100114312) وتعني انص وحددنا طول الحروف ٠٠١‏ وتركنا بقية الخواص. علما ان الطول للقيم 
حسب تقييم الشخص تقيم مثلا الاسم كما يحتاج لحروف ورقم الجوال كم يحتاج لعدد ارقام وهكذا. نصل اخر ثلاثة حقول لا نضيف الا الحقل الاخير على 
اليسار :0011210) ونختار درؤط_1618 . بعد الانتهاء نقوم بالضغط على زر (حفظ) وسيظهر الجدول كما في الصورة: 


71ل خرن آلاامدام 


عمل بناء | (لل] 501 | نا بحث استعلام بواسطة منال | لن] تصدير | إن استيراد | لهي عمليات | :8 الإمتيازات | يت 11085ن801 ١‏ ©) أحداث | 32 119090605 
ا © © © 8 
جدول ه العملية صقوف إو» تيع 80وغهاام) حجم الحمل الزائد 
حسمب 510 استعراض إفإ] بناء 39 بحت ل إدخال #© إفراغ © حذنف 58 100008 لأم_قثأن 16 كيلويايت 5 
(الجداول الأخيرة) .. ب 0 
1 جدول (جداول) المجموع 5 100008 «أط_قك)أن 16 كيلويايت 0 يديت 
7 5001 
2 تحديد الكل / إلغاء تحديد الكل مع المحدد: ؟ 


كالتالي:.5)01تعليمة اضافة جدول بواسطة 


11 1ك !' 01111 

( 

و(1111)4 "111411161 

و(55) ختقطاع:21؟ 71101116 

و(1111)14 ©1آ11:051 

(101")100[ع:1<ا 11016 و(1<01:2[101*)66 5ى "0007 
و 


ل 0 0 /00967 :عا اا8 اا 
١ -‏ أعجا.ه أم حاعع]0©1]أ :اأهمرع 2 /2:00967 ١/08١1‏ 


١ 


إضافة بيانات ١اصفوف)‏ إلى الجداول 


يتم إضافة بيانات إلى الجداول عن طريق 7171272011 ثم اختيار قاعدة البيانات التي نريد الضافة لها مثلا (501:00[1) ستظهر كما بالصورة التالية: 


06001 امهم 


م 5 ع عملا يناء | (لل 501 | 1 بحث استعلام يبواسطة مثال | الَِتَو] تصدير | [ِتََ استيراد | لهي عمليات | 1ه الإمتيازات | إن 801/4105 ١‏ ©) أحداث | 32 101095 
ىو له 
جدول ه العملية صقوف إو» تيع 20100ااهم) حجم الحمل الزاله 
7 50 7 استعراض إبمإآ بناء #ا بحت 9 إدخال #© إفراغ © حذف 8 180008 لأط_قتأن 16 كيلويايت 2 
(الجداول الأخيرة) ... . 
1 جدول (جداول) المجموع 2 100008 (أط_8]أن 26 كيلويديت 0 يديت 
0 20001 


كما في الصورة أعلاه ستلاحظ اسم الجدول (56306116) ولإدخال البيانات نقوم بالضغط على إدخال وستظهر نافذة ادخال البيانات كما في الصورة: 


(2 أومطلقعها » © 00011و 


عي يناء | ([ 501 ١‏ 1 يحث استعلام يواسطة منال | الِنه] تصدير | [2] استيراد | #إى عمليات | :2 الإمتيازات | يكن 5©لألا80 | ©) أصات | 32 111090625 
جدول اه *« إدخال الجدول 
50101 9 استعراض | 9 لق نعتن 0 
1 حمود توع ؛. : 
1 ِ- 
جيك رجايق | عطصتاط 4 د 


7 تحديد الكل / إلغاء تحديد الكل 
253 3)55طاعق/) 9 


يوسف صالح على 
هم عرض تسخة للطباعة يم قاموس البإ 
: عانطممم 0014 9 
3 أنشئ الجدول 1006009[ظظ*ظظ1 
5 66)]ةطاءة/) و : سسب 
ا |4 اليمن - صنعاء. - امانة العاصسمة 
الاسم: 
م250 3)100 لجاعو 9 
تتقية يفنت 
حفية | 
ا 
| © تجاهل 
حمود توع دالة خاني القيمة َ 1 
ع تنام 0024 34 
قم 3)55طعة/) 9 
عازطممم 00014 ي 
55 3)66داعق/) 9 
ككقاء 
4 


لاحظ كما في الصورة بعد الضغط على ادخال تظهر النافذة السابقة الصف الأول يطلب 21161 وهو الرقم وتركناه فارغ لأننا قمنا اعدادات بإضافته 
اتوماتيكا» الصف الثاني طلب الاسم ©2221 وكتبنا (يوسف صالح علي), في الصف الثالث من الفورم طلب رقم الجوال 2201711 وحددنا الرقم, في 
الصف الرابع طلب العنوان و20011:25 وحددنا العنوان» في الصف الخامس طلب ملاحظات واضفنا ملاحظة. 


بعد الانتهاء نضغط على زر تنفيذ. يمكننا هنا ان نظيف اكثر من صف لاحظ المربعات او الحقول في الاسفل , او الاكتفاء بإضافة صف واحد ونضغط 
على زر تنفيذ. 
تعليمة اضافة البيانات السابقة للجدول بواسطة ,501 كالتالي: 


(1201, 5ك :2001, 7120511 111)01116 1110010 11 ك1 
:(ملاحظا ت,اليمن - امانة العاصمة ,551/5 4 ١١‏ ,يوسف صالح علي) ١74111155‏ 


تم عمل كود 501 أعلاه وتعمل على ادخال القيم الى الجدول .قمنا بعمل استعلام 17110 '17215191+1) ومعناه ادخال إلى الجدول (50306214) ثم ذكرنا 
الأعمدة التي نريد الادخال لها بالترتيب» بعد ذكر الأعمدة نذكر البيانات الاسم والجوال والعنوان والملاحظات حسب الترتيب للأعمدة. 


ل 0 /00967 :ع |ا8 ١/0‏ 
ا ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


١1" 


تعديل وتحديث فى قاعدة البيانات 


للتعديل البيانات عن طريق 11252)11211امطام بواسطة الخطوات السابقة فتح قاعدة بيانات 50110011 ثم الضغط على الجدول 5030616 وستظهر كما 
بالصورة: 
جب ]| ععاصونم عمهم عاتطمص 200155 حوللا 
(ا ”ني تعديل غ نسح © حتفا 2 يوسف صائح عني 123456789 اليمن - صنعاء - امانة العاصمة دورة المواقع الالكترونية 
4#__ تحديد الكل / إلغاء تحديد الكل مع المحدد. ىم تغيير © حذف << 9] تصدير 


عرض : 5/ا0) |100 لاعلا 283085 ١‏ 30 :011/5 أ0 اعطتونالة | 0 :10100 51316 


كما تلاحظ أعلاه تظهر صورة لجدول 56101624 والبيانات التي بداخلة ويمكننا التعديل بالضغط على ايقونة او رابط تعديل امام اي بيانات المراد التعديل 
عليها وبعد الضغط على التعديل ستظهر النافذة التالية : 


قن امهم 


9] استعراض | آك/ يتاء | (1 501 هلا يحت | ل إدخال | 72] تصدير +ع استيراد ٠‏ شق عمليات 25 درعوو11 


2 ا © © : 3 
عمود توع دالة _خالي القيمة 
نام 04 
(الجداول الأخيرة) ... 5 0 ؟ 2 
5 0ه 35 3))55لاءرق/) 5 لوووغ فوب نونك 
0804ناأه عازطممم 01014 5 
12000169 


عاطم تمه 0055 3))66طعرقن) 


غ50 3))100اعرو/) 


كما تلاحظ ظهرت البيانات ويبقى علينا تعديل ما نريد وبعد الانتهاء الضغط على زر (تنفيذ). 
تعليمة 5010 لتعديل وتحديث بيانات في جدول: 
1 1411 


'155---71107110, يوسف '-1101:0 5111 
؛' 11111111 771111111 


كما تلاحظ تعليمة او استعلام ,5001 بواسطة 118871(4175 يمكنك تعديل أي بيانات في الجدول وبالطريقة السابقة في السطر الأول كتبنا استعلام 
التعديل ثم اسم الجدول؛ في السطر الثاني كتبنا العمود الذي نريد التعديل فيه وهو الاسم ©2ه: ثم علامة يساوي ثم الاسم الذي نريد وضعه بدل السابق 
وكما تلاحظ فلابد من وجود الفواصل (,) وايضا علامة التنصيص كما في الاستعلام. ثم العمود الخاص بالجوال وذكرنا اسم العمود ثم علامة يساوي ثم 
بين علامتي تنصيص الجوال الجديد. وهكذا مع اي عمود نريد تعديله. في السطر الاخير وهو مهم جدا الاشارة الى رقم الصف المراد تعديله بحيث طلبنا 
شرط 71711171+15 ومعناه بحيث أو بشرط ثم نكتب الشرط وهو '1'-21311561 وهو أن الرقم للصف هو رقم واحد. هنا سيتم التعرف على الصف 
وتعديله كما نريد. 


ل ل 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


كلا 


حذف صف أو بيانات من الجدول 


لحذف بيانات او صف من قاعدة بيانات ومن جدول بالتحديد فعن طريق «رندد2وددمطم نفتح 10211056 ثم «ندصه:زدومطم ثم قاعدة بيانات 
فنختار قاعدة البيانات ولتكن 50120011 ثم نحتار الجدول 5003061 ستظهر لنا كما في الصورة: 


+ خيارات 
مو جه ]| > ععطاصنام عصهم عانتطمم 20015 تافللا 
لا ثم تحديل غ نسخ © حتف 2 يوسف صالح علي 123456789 اليمن - صتعاء - اماتة العاصمة دورة المواقع الالكتروتية 


4#__ تحديد الكل| ذف إحديد الكل مع المحند. ى تغيير © حتف | ] تصدير 
من خلال الصورة تظهر ايقونة الحذف الحمراء امام كل صف فمن خلالها يمكن حذف اي صف. كما يمكن التأشير على الصفوف بعلمة صح في الطرف 
الأيمن والحذف من اسفل الفورم. 
تعليمة الحذف في 501 


01 لل ان لالان 09 (19 
: 'يوسف صالح '-11017:6 (4171 ' 1'- :© 121112 717171111111 


كما تلاحظ أعلاه تم عمل استعلام لحذف سجل او صف في جدول معين بواسطة تعليمة (/1"1801 10191,17117) ثم نكتب اسم الجدول وهو 500101626 ثم 
ننتقل للشرط وهو (5111111+17) ثم عنصر الشرط نفسة وكتبنا الرقم 2131561 بأن يساوي '1' وسيقوم بحذف السجل كامل للرقم واحدء ثم أضفنا 
شرط آخر ويمكننا الاستغناء عنه بعد تعليمة ((4771) وهو الاسم 2213 يساوي "يوسف صالح" ثم الاغلاق بفاصلة منقوطة. 


711000 #0 009677 :6 || 08/ا 
امه أعم.وأم داءعع]©0)مز :اتدمع ‏ 772755202 2:00967 8|118 0لا 


ربط 2112 هع .111501 


نصل هنا إلى أهم الخطوات في انشاء المواقع الالكترونية وهو كيفية إدخال البيانات من الفورم الذي تعلمنا إنشاءه بالم1117411 مع البي اتش بي 
والخزن البيانات في قاعدة البيانات الذي تعلمنا انشائها ايضا. تعتمد عملية ربط قاعدة البيانات مع صفحة البي اتش بي على عدة ادوات تعلمنا الجزء 
الأكبر منها والأهم وهي (الفورم - وجود قاعدة بيانات - دوال نقل البيانات - عمليات الاستعلام 5010 - التنسيق بشكل عام ). سنأخذ هنا كيفية إدخال 
البيانات إلى قاعدة البيانات. 


إدخال البيانات بواسطة 125511 


لتعلم كيفية إدخال البيانات سنقوم بعمل فورم فيه طلب لبيانات جدول الطالب الذي أنشأناه مسبقا في ال«ؤجم:720«دمام الموجود في قاعدة بيانات 
1. والخطوات العامة هي (أولا :عمل مجلد جديد وليكم اسمه 1223501_«طام أو اي اسم ثم عمل فورم الإدخال في صفحة ام ولتكن 
مطم.)«»ومزؤ ثانيا :عمل صفحة أخرى سنسميها مثلا «رطم.ووء1700م_125»16 تستقبل عبر الدوال البيانات وتقوم بعملية الاستعلام 501 لإدخال 
البيانات إلى قاعدة البيانات ) 


الخطوات بالتفصيل: 


الخطوة الأولى: نقوم بعمل الفورم اللازم لإدخال البيانات من خلال الصفحة التي سننشئها وهي «[طم.55ع112561_2100 وسيكون الكود كما في الشكل: 


<00:37ط> عدم 

<2ع225مت /> أدخل بياتات الطالب<ط><2هع22مءح> 2 

25 >01 1355-5 6110625 "< 

</ عط> 2 

<”20586">-61200ع21 "ططم. 26_220855ع 125"-36102 ااه 2 > 27 
إسم الطائلب| أدثث 

</ ع«ط><"” نمه" -237216 "عدج 6106-7 اتام 1 > 29 

الجوال زفك 

</ ع«ط><” 23116-22056116 "عع طمشتتاط" -> 517502 تام 12> 3 
العتوان | يم 


ين 


</ عط><" 5و5ع23116-7"3002 "جعزم ج "7 52ج انام 12> 

ملاحظات 

</ 2ط><”" بلاحظات"->57731116 "5206"-23116 "طعروج "تع ززع أناط 12> 
<"16منطنا5 "->1506 6 6نام12> 

خمتتع هخ /> 

> / 01< 

<013ه0ط/ > 


3 
4 
5 


ذن) ث) ش) ث) ثب 
ك مم 


دن 
م 


كما تلاحظ الفورم داخل منطقة ال(20013) ومحتواه الحقول (الاسم - الجوال - العنوان - ملاحظات ) تعلمنا سابقا كيفية عملة وشرحنا اساسياته » 
نلاحظ في سطر 77 حددنا الاكشن واتجاه انتقال البيانات وهي للصفحة المحددة بعد الضغط مباشرة على زر غ1دورطنه »كما نلاحظ في سطر ١٠‏ 
استدعينا كلاس تم انشاءه مسبقا لعمل تنسيق للديف الذي يحتوي الفورم لتنسيق الفورم ويكون اكثر وضوحا والكلاس محلي وضعناه في منطقة 
(1680) وهنا ليس معناه اننا نقوم في لغة بي اتش بي بوضع الكلاس ضمن راس الصفحة ولكن فقط هنا للمثال ويجب ان تعتمد على ملف ال6©55 
دائما في الأعمال وسيكون الكلاس كالتالي : 
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زذق 


<"دقن /لعجروح "موا 53712> 
4 52511062 . 
:526 521522012:0 
:711062 
:251 :0326612 
:#000 :ع2ه1هم» 
: 56212 ,13171065 ,"202222 مم11 131710265" :117 1حقتة ‏ -12025 
: 025 2025-1213 
:2 : 2025-5326 
:م 4990 501134 :ععلعمط 
3232 323 323 : 2031315ع2-ع2عم و2 0ط 
:45 غختم4 عدم4 عدم4 : 223001329 
<561716 / > 


ما 6 


فم فم فم 


1 
2 


وسيكون شكل الموقع او الفورم داخل الديف كما في الصورة : 


أدخل بيانات الطالب 
إسم الطالب | 
الجوال ا 
العنوان 
تت ا 


كما تلاحظ الفورم أعلاه بشكل منسق بنسبة 97٠‏ وسيأتي فيما بعد في التطبيق النهائي لكيفية التنسيق الدقيق للفورم بشكل عام وننتقل للخطوة الثانية. 


الخطوة الثانية : نقوم بعمل صفحة طام.1256176_210©55 والتي ستحوي دالة استقبال البيانات من الفورم وعملية الاتصال بقاعدة البيانات وعملية 
الاستعلام الخاصة بإدخال البيانات للجدول والكود كالتالي: 


("011ه0ظه5","" ,"20026" , "105621260358") عع دم 105411 حورم 5 
02621202 عألع026 // 
(()720طصطع_ععع صدمه_1لودتاس) 12 
1 
: ()2202<ع_ععع تدم _2825011 . " :117501 60 ععع رمه ه25 25921160" مطعع 
/ 


: [ 'عسقه ' ] 5_2051 ععممد5 
'112طه" ' ] 6-5_2051 5200511 
"35-5_2051]2655ع55002 
66 2051_وحهم نج موه 


(©205 ,30026535 ,2011 ,23202) 535110625 11110 1115821 "5501-7 
:"( 'م5*5202 ' ,"55002655 ' ,'ع8:011؟ ' , ' عنتق»؟ ' ) 10155ئل178 


0 
5 
2 


: (5591 ,دمع5) ناتاعناي_1 1ن دا 
:"تمت الاضاقة يتجاح" مطعع 


نتن ضر كن 


: (صمء5) ع5ه1ع _1 لني داه 


5 ل مب ما 


قبل الدخول في شرح الكود نلاحظ في تقدمنا في تعلم لغة البي اتش بي كبر حجم الكود لكني أنبه هنا إلى أن الكود مهما كبر فهي عمليات بسيطة تعلمناها 
مسبقا نقوم بدمجها وربطها للتكامل مع بعضها ونحتاج هنا الى تركيز وترتيب هذه الاكواد فقط, 


في سطر ؛ قمنا بعملية الاتصال بقاعدة البيانات اولا قبل اي ادخال او اخراج منها. قمنا بعمل متغير وسميناه م82 ثم ادرجنا بداخله دالة الاتصال 
وصورتها العامة (''ع025519010'',''12)8525'',''“اءونا'',''12056 123:501)96171 حيث 12056 :567361 هو السرفر المستضيف لملفات موقعك 
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سانا 


وقاعدة بياناتك والسرفر الذي يحوي قاعدة البيانات الخاص بنا هو 170211054 كما تلاحظ في الكود ثم 11567 وتعني اسم المستخدم الخاص بالسرفر 
لكي نستطيع الوصول لقاعدة البيانات فوضعنا اسم المستخدم 7004 لأنه موجود فيه مسبقا وهي افتراضي في أي برنامج سرفر ثم 725519010 وجعلناه 
في الكود فارغ لأنه لم نعين في السرفر الذي نعمل عليه اي كلمة مرور للمستخدم فتركناها فارغة. ثم 02485356 وهنا نضع اسم قاعدة البيانات 
فوضعنا اسم القاعدة التي نعمل عليها وهي 50170011 . 


في السطر١ ١‏ استخدمنا دالة الفحص او الخطأ (200"تاء_أععصصمه_تلوكئوحمر وهذه الدالة موجودة ضمن برمجيات السرفر تقوم بعملية فحص ما اذا 
كان هناك اي خطأ في عملية الاتصال ورقم الخطأ وضعنا هذه الدالة في تعليمة شرط. والغرض من ذلك تنبيهنا الى وجود الخطأ واعلامنا بمكانه إن وجد. 
ومعنى الدالة في داخل الشرط هو (في حالة كان هناك خطأ تم ايجاده بالدال يتم اتخاذ الاجراء ما بين القوسين ) 


في سطر ١"‏ وما بين القوسين هي عمليه إخراج بواسطة وراع» ثم نص عادي كتبناه وهو ر217500[1 0) )©©<ددمء 60 1591140: ومعناه فشل في 
الاتصال ثم نقطة ومعنى النقطة هنا (ايضا يتم اخراج ما بعد النقطة وهي اختصار لعدم تكرار 0120» ) ما بعد النقطة طلبنا اخراج الخطأ بواسطة الدالة 


(1"010لاع_اأععصصمء_للنكتمم . 


[ 'عمتقحس ' ] 5_2051 ععمسمم؟ 
]3112-5_5051طممر؟ 
55 ]2051_؟-ووع2002 ؟ 
:['ع2051]66_وحعج ص5 


كما تلاحظ من سطر ١5‏ الى سطر ١5‏ عملية استقبال للبيانات الى متغيرات عن طريقة دالة 5-2057 .كما في السطر ١١‏ أنشأنا متغير وأسميناه 
عدروحة ثم عملية استيراد الحقل »ع«درهم إلى داخله بواسطة 8_20571 .وهكذا مع بقية المتغيرات. 

21 550)1-"1115811 11110 535110625 .)23302, 200112, 30026535, 205( 

:"( 'غعغهصة ' , ' 35دع553002 ' ,'ع611مة ' , ' عسمدة ' ) 5ظاتائلتم7ا | بيرم 

في سطر 7١‏ الى 7١‏ عملية وضع الاستعلام داخل متغير وهو 8501 ويمكن تسميته باي اسم. قمنا بعمل متغير واسميناه 8501 ثم ادرجنا بداخلة عملية 
استعلام وتعلمنا مسبقا طريقة الاستعلام والادخال بواسطة ,5001 في السطر ١؟‏ كتبنا تعليمة الادخال 13110 1721515121 الى 561016134 وهو الجدول 
وحددنا الاعمدة التي سنضيف اليها وهي (ع1206 ,20011:©55, 22011 ,عدددروه) ثم في سطر ؟ ؟ حددنا القيم 774117155 وهي المتغيرات التي أدخلنا 
فيها البيانات الاسطر من ١5‏ الى ١9‏ وحددنا المتغيرات ('ع)20زة','و5ع:52001' ,'116طمحرة','عستهصة؟'). 


ع عع ا 0 24 
:"تمت الاضاقة يتجاح" هلطعع | اث 


في سطر 54 كما في الصورة أعلاه أضفنا دالة جديدة وهي دالة الاتصال وتنفيذ الاستعلام عن طريق المتغيرات والصورة العامة هي : 
(90 ,5011_011©17)98:(دم حيث تكتب الدالة كما هي ويضاف بدلا من 89 متغير الاتصال وقمنا بتغييره بم50 والمتغير 41 هو متغير الاستعلام وقد 
وضعنا المتغير الذي يحوي الاستعلام وهو 8501 . في سطر 5" بعد الانتهاء والمرور من سطر ؛ " وتنفيذ الاتصال والاستعلام الخاص بالبيانات 
وادخالها يتم كتابة (تمت الاضافة بنجاح). 


ملاحظة: في تنفيذ الاتصال مع قاعدة البيانات في لغة البي اتش بي يفضل عمل تعليمة الشرط 16 عند تنفيذ الاستعلام في حالة وجود خطأ يتم تحديده مالم 
ستظهر الرسالة "تمت الاضافة بنجاح" حتى لو كان هناك خطأ. لذلك وجد حل لهذه الملاحظة وهو كما في الكود التالي: 


( (5591 ,تمع5) تاناعنا»ي_1 1و دتتم! ) 12 
1 
: ( (طمى؟5) مدع _11ني ديم و * «تخزومع 122" إعنة 
1 

:"تمت الاضاقة يتجاح" صمطعع 

(صطمن؟5) 5411_1055 


ذم ديم يم يخ يم 


4 
5 
ك 
8 
9 


كنا 
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كيلا 


لاحظ في سطر ؛ ؟ اضفنا شرط 16 وبطريقة جديد لاحظ وجود علامة التعجب ! قبل الدالة وتعني (عدم) او (لم تنفذ) وفي هذا السطر يتم تنفيذ تعليمة 
ال501 والاتصال «رمع8 والشرط هنا هو في حالة ( لم تنفذ الدالة ) أي فشلت في عملها يتم الدخول لما بين القوسين وهو اخراج كلمة (5121019) 
ومعناه خطأ ثم نقطة (.) والتي تعني إخراج ايضا دالة («دمع2235011_©11201)8 وهي دالة إظهار الخطأ لعملية الاتصال او اي مشكلة في تنفيذ الاتصال 
والاستعلام ووضعنا المتغير م80 وهو متغير الاتصال كما ذكرنا داخل الدالة كما تلاحظ. في عدم وجود فشل في الاتصال او الاستعلام لا يتم التنفيذ لما 
داخل القوسين ويتم الانتقال للسطر الذي بعده. 


في السطر 78 عند نجاح العملية يتم طباعة واخراج رسالة "تمت الاضافة بنجاح". في سطر 755 دالة جديد ايضا وهي دالة اغلاق قاعدة البيانات 


وصورتها العامة ( )»7135011_105 وما داخل القوسين نضع متغير الاتصال. 


نقوم بتطبيق عملية الإدخال للبيانات وهي عن طريق الفورم كما في الصورة : 


أدخل بيانات الطالب 


إسم الطالب |محمد عبدال 
الجوال |888111222 
العنوان |اليمن - سيأ 
ملاحظات الا يوجد ملاحظات 


إرسال 


كما تلاحظ في الصورة تم عمل البيانات التجريبية وسنقوم بإدخالها بالضغط على زر (ارسال) أو (501:216) وستظهر رسالة كما في الصورة: 


1 |33 نه[ 
نمث الأاضافة ينجاح 
3 


نقوم الان بالذهب الى )1002105 ثم ند 25:2رمطام ثم قاعدة البيانات ثم 50120011 ثم الجدول 5030616 وسنلاحظ التالي كما في الصورة: 


+ خيارات 


4 جه | , فصنم تلنلالنا عانطمم 2001255 حوللا 
تعديل 6 نسخ © حتف |1 يوسف صالح على 9 اليمن - صنعاء - أمانة العاصمة أدورة المواقع الالكترونية 
تي تعديل 6 تسخ © حتف |2 نا_نانا65 6:66 0...6ا6...نا+ 888111222 ١‏ 6266 - +لنا... نانارنا65؟ *6566,250.لا...لا 0-6 *ناذنا 65ينا 


١.7‏ ا :تسود لقتل مع الععقدا ىم تغيير © حنف ١‏ 0 تصدير 


تم اضافة السجل او البيانات التي ادخلتها ولكن تم ظهورها بالشكل الغير واضح وبرموز مختلفة ولا مشكلة في ذلك. حيث يمكننا عرضها على المتصفح 
باللغة العربية كما سيأتي. 


111 0 009677 :6 || 08/ا 
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إخراج البيانات بواسطة '515:1:8071 


تقوم عملية ال 561604 بعمل إخراج البيانات من القاعدة والجدول إلى صفحة مام أو صفحة الويب ويتم ذلك من خلال التعليمة 501 وصورتها العامة 
كالتالي : 


: عتطتتقر_عطاطها 11011 1111م 


كما تلاحظ يمكن أن تكون التعليمة كما سبق تم إضافة نجمة قبل 11801141 وتعني جميع الأعمدة في الجدول (06:هد_»251)). وهناك أيضا ثورة آخرى 
لعملية اخراج البيانات كما في الصورة العامة التالية: 


؟ 22322_ع1طه] 1150011 12م ,1ام 1 )راكاد 


كما تلاحظ عملنا عملية '5101,10):1 للعمود الأول (0011) والعمود الثاني (012») من الجدول (©:222د_»81)). سنقوم بتطبيق عملية إخراج البيانات 
من قاعدة البيانات التي قمنا بإنشائها 50120011 في الجدول غ+61062ه . قبل تنفيذ الكود والصفحة نقوم بعملية تعبئة للبيانات إلى الجدول من خلال 
الصفحة التي أنشأناها مسبقا لعملية 1561 ولتكن © طلاب جدد ثم نقوم بعملية إخراج البيانات لصفحة ويب. 


بعد القيام بعملية إدخال بيانات للجدول ضمن قاعدة البيانات لدينا سيكون شكلها في «ند)2272م1آم كالتالي: 


+ كيارات 


8 جع ]| ه ععاصونم تندكلن عازطممم 200155 انا 
ا (©] حي تعديل © تسح © حتف |1 يوسف صائح علي 9 اليمن - صتعاء - أمانة العاصمة دورة المواقع الالكتروتية 
هي تعديل غيأة تسخ © حتف |2 نالانا65 © 616 ©...لا©...نا+ 888111222 ١‏ © 626 - +نا... نالا رنا65؟ع *65©6, 6566 .لا... لا 6-6 *ناونا ومنا 
تعديل 6 نسخ © حتف |3 665 65610...6+ 0 اا6.ا© - 250*6+05605 *050, 65626 لا... لا 0-6 *ناؤن 05نا 
تي تعديل ع تسخ © حتف |4 6لا65ر6 _نار56نانا 5 696+6... لالا65 “056 ©656.لا... لا 6-6 *ناونا 65لا 
تعديل 6 نسخ © حتف |5 2:05 مناناة 5610لا 2 63 لا 6+656-© - 0565 56لا نا *65606,25©6.لا... نا 6-6 *ناؤنا 65.نا 
تي تعديل 6ب تسح © حتف |6 ©0ا05ر6 _ناؤنا 2زنا 9 الاترنا... لا - 06510667656+ *6560,656,لا... لا 6-6 *ناؤنا وهنا 


كما تشاهد أعلاه ظهور رموز للبيانات التي قمنا بإدخالها. نقوم بحذف اول سطر وهو الاوضح بين الجميع ونبقي على بقية الصفوف التي ادخلناها. 
سنقوم بعمل صفحة بي اتش بي ونسميها ام.]501»0 في المجلد الذي فيه الصفحات م1م.125©:6 وغيرها ونجعلها تقوم بعملية إخراج البيانات من 
قاعدة البيانات إلى الصفحة وسيكون الكود كالتالي: 


<7خ001ط> 
حرطاح[ز2 > 
"1 , "" ,"2008" , "1062120358") امع ططمك _1 1ن 5 تتسحخورمن 5 


26212 طعأع026 // 

(()220عع_ععع ندم _1 1و دته) 112 
0 
()2202ع_ناءع75011_0022آ10 . " :117501 60 #ععضدمه ه20 231160" مطعع 
1 


: ("56110622 58011 * 5151:1501" ,2م50 ) 217دع11كي_11ودتتم > 51115ع512 


( (5111ع522) 322317_طء2ع411_2و5م > 7م52 ) 211 
0 


“5116 ' ]20 5 . " " . [ ' 23216 ' ] امع مطعهة ع 
:>*<ع>" مامه 22 

23 ! 

24 

: (طمى5) ع011_1055و20125 ال حنم 

26 2 

27 >/20017< 
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١". 


كما تلاحظ الكود في صفحة «رطام.)ح»ع5»1 في سطر ؟ عملية اتصال بقاعدة البيانات في السرفر 1002112054 ثم كلمتي المرور (اسم المستخدم 1004 و 
كلمة السر فارغة ) ثم اسم قاعدة البيانات 5010011 وادرجنا ضمن المتغير «رمح9. 


في سطر ١١‏ إلى ١١‏ عملية فحص للاتصال بقاعدة البيانات في حالة وجود خطأ ما يتم إظهاره ومكانه . في سطر ١١‏ عرفنا متغير واسميناه غ11اوع81ة 
ثم أدرجنا بداخلة دالة الاستعلام ()2235011_011©19 وبداخلها عملية الاتصال بواسطة المتغير مع8 (راجع سطر 4) وأيضا تعليمة 501 وهي 
د56 1101/1 * '5191101) والتي تعني استدعاء جميع الأعمدة في الجدول 5]010614. 


في السطر ١5‏ قمنا بعمل شرط »0111 بداخله عرفنا متغير 9101 ويحوي بدخلة دالة ()21323_طاء)22350[11_26 التي تقوم بعملية تنفيذ الاستعلام 
والاحتفاظ بالبيانات التي استعلمت عنها داخل مصفوفة (21129) و 9751016 هو المتغير الذي يحوي الاستعلام ويتم التنفيذ بوجوده. في سطر "١‏ 
عملية إخراج لبيانات العمود الذي نريده كتبنا المتغير 8501 الذي يحوي المصفوفة والأعمدة كاملة ثم بين قوسين اخترنا العمود [ع022] ثم نقطة ثم 
إخراج فراغ كفاصل " " ثم نقطة وعملية إخراج للعمود [ع02011] من المصفوفة في المتغير 8017 . في سطر 7١‏ النزول لسطر بعد كل اسم. 
والغرض من دالة الشرط ع1:211؟7 هو المرور على جميع الصفوف في المصفوفة التي ستحوي جميع البيانات من الجدول 56306126 . نقوم بالان بتنفيذ 
الكود في 10021112056 للصفحة م1[م.1ع5»16 وسيكون الناتج كما في الصورة : 


ملام غععاء1/5ممة/أدهطاقءو| 5 ٠‏ "© ىو 


محمد عبدالله 888111222 
أحمد حسن 777888000 
قيصل صالح 222111345 
يحيى على 444333222 
نبيل صائح 999000999 


كما نلاحظ عملية الإخراج تم إظهار جميع الصفوف في قاعدة البيانات التي لدينا. وسيتم التطرق فيما بعد حول كيفية إخراج بيانات حسب شروط معينة. 
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تعديل وحذف البيانات بواسطة (:711:8:11 - 12848715]) 
من أهم عمليات المواقع هي التعديل على البيانات والتي نحتاجها لعملية التعديل على جزء معين أو كامل لبعض الصفوف او قاعدة البيانات. هنا سنتطرق 
لطريقة التعديل على صف معين بواسطة تعليمة ,5001 وهي 137 1121(4 والصورة العامة للتعديل على أي صف كالتالي: 
'7770001119"-012» ,'كأتاكنا؟'-011» 511 عصحص_عاطة) 1 1خ»©راطنا 
:10-1 11111115 


كما نلاحظ في السطر الأول ذكرنا تعليمة التحديث أو التعديل 112104177 ثم الجدول الذي سنعدل في أحد صفوفه ع««دهد_ء1طه) ثم عملنا أمر '5151 
والذي يأمر بوضع البيانات بدلا عن السابق ثم حدد العمود الذي نريد التعديل فيه وهو العمود 2011 وأدرجنا القيمة المعدلة فمثلا هما كتبنا الاسم يكون 
ور ثم فاصلة وذكرنا عمود آخر وهو 012 لتعديل الجوال وكتبنا القيمة كما تلاحظ. في السطر الثاني وهي الأهم ولابد من وجودها وهي الشرط لأن 
السرفر لا يعرف اي صف يتم التعديل فيه فتأتي هنا قيمة الشرط وأهميته بحيث يحدد في أي سطر يتم التعديل حيث كتبنا الشرط 75715119117 وتعني ( 
بشرط أن يكون ) ثم حدد الشرط وهو أن رقم الصف او السجل يساوي ١‏ . سيتم التعديل على السجل او الصف الذي يحمل الرقم ١‏ فقط ولا يتم التعديل 


في أي صف آخر. 
تطبيق عملية التعديل : 


سننشئ قاعدة بيانات جديدة ونسميها ([ممطءة) مطابقة لقاعدة البيانات السابقة والجدول 5101 ويحوي نفس الأعمدة فقط سنغير أسم العمود 
:21 الى 10 ويمكنك عملها بسهولة بنفس الطرق التي تعلمناها سابقا. 


سننشئ مجلد جديد داخل المجلد 777777 ونسمي المجلد الجديد والذي سنضع الصفحات فيه ب 1001266 . 
سنحتاج إلى " صفحات «رطم: 

مرطم.عقدم» 

مطام. أترعكسز 

ممطام.دووع10م_أترءك1 

مرطام.اتلء 


مطم.عاعاء0 


الأولى هي «رطام.ع دمح والتي تحوي بيانات الاتصال لقاعدة البيانات ونستخدمها لغرض استدعائها في الصفحات البقية بدلا من عمل كود الاتصال في 

كل صفحة. ولاستدعائها نستخدم دالة (©1210106) التي تستدعي الكود الذي بداخل الملف. الصفحة الثانية وهي [ام.غ:©125 وصفحة أخرى تتبعها 
وهي (طام.ووءع102م_125»6) التي تحويان كود الادخال للبيانات. الصفحة الرابعة وهي م1م.0111» وهي الصفحة التي ستقوم بعملية التعديل على 
البيانات. صفحة «رطام.ع)0616 والتي تحوي كود الحذف. 


وسيكون شكل المجلد وما يحتوي من ملفات كما في الصورة : 


557000 0 009677 :|| 1/08 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


© لا > ج32 عام بيعلا ص8 > طاغابماعمقطد > بووعطنا ماع نساعمآ > عتعامقو 0 


-- 2 .م 
512 انا لمم عغؤغوم عصقلة ‏ ج- 9 


118 غم منزم ‏ (5:ا١*م 715/١8/06‏ وقصم !>" ممنغاىء0 !1 
118 غم5 مزلم ١ءنةء‏ ص 715/١5/1١‏ ماع 7 5ممهاميه0 7[ 
38 م5 منزم لاءنةء صن 7١15/١8/1١‏ ا كععواه غمعءء8 151 
218 م5 ملام ٠١1:61‏ م6 715/١1/-‏ ع 5 
268 غملع5 ميرم ١1‏ م 7١15/٠”‏ بعكم :7" كع نوطنا 59 
1 دكعع0ام_ع كما :7" كمع صصبءهم 8 
عأكناناا الى 
كعسدق زم ك1 
دمع10/ كر 


118 غملع5 ميرم ١6+‏ م ٠7/71‏ /5اء* 


منمموعممهل! 4ه 


عخنام مره اللاو 
(ع) دنه ادها ولك 
(:0) عصساملا معلا وت 
(ع) عصساملا معلا وت 


مازع) عدساملا موعلا وت 
عممطام| د 'أعدداملا || 


ممسصماة 5م 


5ع 6 1 


قبل البدء في شرح عمل أكواد الصفحات اعلاه نقوم بإظهار صورة لقاعدة البيانات التي سنعمل عليها من 25201:313دمطام وهي كما في الصورة : 


هك 7 © خا #2 ا :2 الالاضاءام*736016747#ععءطط9وط0ع51ع2ع1580451 معامغ8 ملام.عءوامعء_اطاعغع وم ميق مع 0ر5 ع اطقغي8 امم - طال7مطام »زع لم ة/متحمل0د 


لمعنه 59 « اممك؟ 8 « غكمطادعه| أ 


5عوو11 362 | 5ومنهمهم0 نق ‏ 6رزممها لك 6رممع»«ع هخ غيعوما غ6 طعمهه5 ذا له5 [غ ‏ عنفعن2د5 كل ووسمم8 [] 


ممناعم اع ؛اندقع0 اانل! كوعغناطتقكعم ممنغهاام) عمنا1 عتمولة # 
5عنالة أع10أوا0 ع دعغاابنط [2] اغهم5 75 »مها لك عدوادنا إن مقصلط ف م00 © عومدك فى !العالاعطعلذةا_10اناكط عمملل لذ (4)غما 10 1 2ه 
5عنااةل/ا أء10أوا0 3 #اعناانط |7 ادنندم5 5] »عنما زع عدوندنا إويق مقط ف ممما © عودددا0 حي 7 ولا واط_قلأنا (55) وعدا عصيهم 2 [) 
5عنالةل/ا أء10أوز0 [5] مدعااابط [ي ادنادم5 أي »عنما [ك دنواهن و مقط ف م00 © مودت صق يك كان (14)ئ6ا عاأطمم 3 0 
5عنااة/ا أء10أوا0 3 #اعكاانط [2)] ادتندم5 5 عنما كن عدوأدنا إه1 مدمءط ف مم0نا © عوددا0 ع 7/0 ولا قأط_قتأن (3))66ع:3لا 5وع:300 4 [] 
نلق أء10أوا0 [5] ك«عناانط [ي] ادنغدم5 7 »عنما [ك دنواهن هل مقط ف م000 © عودددات عق 7 ولا لأط_قتأن (100)ق اعد ع0 5 [] 


«08ها 5 عنونمنا 0 بمقممص هي مم0 © هومدد© ى ‏ ودسم8 5 «معاععزعد 1/1 الك عاعة© [] + 


5سيامء عبهاا مل © عانأعنماه عامة عدمممم وق بتعا ممتتداعط 5ع عامط ع 
ه©) ١؟‏ ها |ععقم © 6ا0ة1أه ومتمدنوه8 نم © عامت1أه لمع م © (وامصسامء | 1| لله مق 


مدن 


5عناع) + 


ا مهنأو صصمماما - 


كع ناذأ )ةد رده ع36م5 
تعهوهمت رهط ترحيت 
ذه_عوهه خصر_26 عن تنا 16 هندط 
22 »اع لم أمغبج غعرع لا 8 5 “وما 
كله 08245 عه 2014 ,10 دعصم ممقدعع لما 15 اهاه1 


كما في الصورة نلاحظ الصورة وهيكل قاعدة البيانات والأعمدة الموجودة فيها. 


ا 0 /00967 :عا اا8 اا 
أع جا. 0 أم جاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


صفحة مرطام.ع 11ممء 


حرطم2 > 


("" ,"2002" , "2120326ه10") أع22دمه_لو قيقد > صمت 5 
: ("226660م 2058مقن " ) 0416 ده 


1 
4 
5 


ززفا 


: (صصمء؟ ,"1مهطه5") طة_ععع1ع1_5ن قتتم6 


ب 


2 


نذا 


كما تلاحظ أعلاه في صفحة وام.ع ]دمح في سطر ” عملية اتصال بالسرفر من خلال دالة الاتصال ( )2333501_012136©4 » تم الاتصال بالسرفر 
1051 ثم المستخدم 0004 ثم كلمة المرور داخل علامتي تنصيص وهي فارغة لأننا لم نعين كلمة مرور للسرفر المحلي الذي نعمل عليه ووضعنا 
هذه البيانات ضمن المتغير 501112. 


في سطر 4 في حالة عدم الاتصال لأي سبب أو خطأ هذا امر بإعطائنا جملة الخطأ وهي )0121166 1201 2122© . في سطر 5 دالة الاتصال بقاعدة 
البيانات من خلال المتغير :1درمح5 الموجود في السطر ٠"‏ ويحوي بيانات الوصول لقاعدة البيانات من السرفر. 


صفحة مرطم. أتتعكسز وصفحة مطام.ووء02:م_»156 هي نفس الصفحات التي تعلمناها في عملية الإدخال للبيانات لم نغير سوا اسم قاعدة البيانات 
من 5010011 إلى 012001و. والأكواد كما في الصورة: 


صفحة «طام.]51م1 : 


<"2-8 داتع 225 قط :7501طط2 رععرعع "- ت ع عط طم "عم25525-1:5ه115-7"00انوه -625 22 1853 5 


<3>/231216ع23 خ22ع51516<1256> 
<"قدقه /لعجارمعع "عم وزع 5112> 


4 56110625 . 9 
2122012:0 10 
:1711062 | ذا : 
ل يه ان 12 
0 :مم01 13 
: 56212 ,1317065 ,"2802232 تباء171 13172165" : 117 تتتتة 5 -12025 14 
025 1 1201216-16 15 
: 26 120215-51 16 
:2 4990 50114 :ععلعمط 27 
323 323 323 : 2020672-232031315 18 
:2 جام4 م4 عزم4 : 22003269 9 
<5611 / > 
<مدعط /> 
<لسغط>» 
<20017> 


<2262مت /> أدخل بياتات الطانبي<ط»><2هع22من > 
<" 2ع لداع 1355-75 03> 


فم نم نِم نِم نِم نَم ديم نِم نِم نَم ذم نن 
ات شر يم نين ظر سن 6١‏ [ 


</ ع«ط> 
<”2058”-2122200 "طم . 220655_نا2ع 125 "->02 3651 م2 > 7 
إسم الطالب 8 
</ عط><"عتتقط" -23716 "ععرم ج 7م اع اتام 12> 9 
الجوال [ 
</ 2ط><"”205116" 23716 "عد طقتاط" ->56 طاتامط 12> 31 
العتوانت 32 
</ ع«ط><”  237116-"50026535‏ "6622 "6156-7 اتام 1 > 33 
ملاحظات 34 
</ 2«ط><" بلاحظات">57731116 "20667"->231216 "22ت 6 "5156-7 تاتام12> 35 
<" 12 1ماطنا51 " - 6106 آانام2 1> 36 
<201211 / > | زيك 
< 01 / > | نك 
9 9و3 
<لصسعط/> | إفإن 


صفحة وام.ودوء710_]لاء وز 


١‏ 0 /00967 :عا اا8 اا 
ع طا.0 آم جحاععغ. نا نالا ناا 


أعجاءه أمحاعع]©0]مز :اتهممع 2 /2:00967 1١08لا‏ 


<"701طتطعد / 1999 أرقع<ه . 113. 17م / / : مع عظ"-25 1ن لسعغط> 2 

3 >2620< 

</ "1528ادتعع 25 شطه ‏ :20201 /ععدعج "->561216 02 "00256215-11506"-01115 2552-6 22253> ال 
<6855>/21516ع220 625 215165<125> 5 

<20ع2/> | كن 

<7خ01ه0ط> 1 


حرطح2 > 
("001ظع5","" ,"2008" , "1056212058") عع دم 111 تنه حخدصمه5 


: [ 'عسقم ' ] 2051_؟ ععسمد؟ 
'112طمه' ] 116-5_2051طممر؟ 
"655 ']35-5_2051ع52002 
:['2051]'2066_وععج 520 


(©208 ,230026535 ,20112 ,23202) - 52110625 11110 1115821 "5501-7 
:"( ' م5502 ' , ' 5530026535 ' , ' 5205116 ' , ' عتتقدة5 ' ) 5 ظكاتائتم7؟ 


((551 ,نمنى5) بادعنان _11و قكتتم! ) 172 
1 
: ( (صمى5) ممع _1 1ن دامس . " تط2وجع5')عتن 
1 

:"تمت الاضاقة يتجاح" مطعع 

: (5هج5) ع0411_6105 2075 

عم 

> /2001< 

<لشتعط > 


وتظهر الصفحة «[طام.):©125 كما في الصورة : 


9 جا # امه محام عدو أ/عغدلمن/أدهطاةءها خا 
أدخل بيانات الطالب 


بعد تعبئة الحقول وكما تعلمنا سابقا يتم استدعاء الصفحة مام.55ع10م_غ12561 لتقوم بعملية ادخال البيانات للجدول. 
صفحة مرطام.1006 : 


وتحوي هذه الصفحة عملية استعلام بإخراج جميع البيانات الموجودة في الجدول 5610164 مشابهة للصفحة التي تعلمناها سابقا («مرطم.4ع»5616) 
وسنقوم بعمل جدول لعرض هذه البيانات وامام كل صف يوجد رابط باسم تعديل وايضا رابط حذف. وسيكون الكود في الصفحة كما في الصورة التالية: 


الجزء الأول من الكود : 


0 0 /00967 :ع اا ١/08‏ 
١ 00‏ أع .هام حاعع] ©1010 :اأهمع 2 00967 :2 عااا8 ولا 


حيطاح2 > 
211 2ه 05222621 043632356 526 1221110126 // 
: ("ططم. و 21 دهن " ) 1211106 


فم نِم زر) ظر ا 


(2125 اطع مه 13585658) 02062 203290ه04656 12 04383 70ت1طءععخ // 
: ("2556 10 لا8 08218 5مع56110 25011 * 55151 ") لاع ناكي_لن دمح 1 ناودع 5 
<2 


5 ل ممم 


<لسغط>» 

<21516/> الرئيسية<51516> 

<520عط> 

</ "2-8 ع ناحعع وطقطه : تغط رععرعع "> تلع ع مه "م15- ط لع نه "5-27 1ناوه لوط عط 3ععمد > 
حمدعص2 / > 

<00137ط> 

<" :251 : ممدعء26 03"-6 5:11 01> 

< /«ط>< /«ط><3 /> إضصاقة جديد<"29طص. 6ع 125"-2ع22 82> 

حتطط2 > 


: "<62562->313192 0>-2062ه0ط ' 505 '>-5ع 10 21>" مطعهة 


:<20000202- 22 52>" مطعهة 
: "<20 /> الاسم <20>" مطعهء 

خ "602 />الجو الجلحع>" مفتلع» 
:"<20/>العتوان<2<0>" مطعه 

: "”<20 />بلاحظات<20>" مطعهة 

: "<20 />»تعديل<50>”" مللعهة 

:"<جع />" مطعهة 


2 
1 
2 


2 
2 
2 
2 
2 
2 
2 
2 
2 
2 
2 


ن) ظير كن 


كلك م 


كما نلاحظ في الصورة والكود أعلاه في سطر ١‏ بدأنا الكود الخاص بالمام ٠‏ في السطر ” عبارة عن تعليق والذي يكون دائما باللون الأصفر ضمن 
أكواد البي اتش بي والمسبوقة بعلامتي سلاش // والتعليق لمن يقرأ باللغة الانجليزية ويشرح التعليق وضيفة السطر الذي يليه أو حسب ما يريد 
المعلق أو من يكتب التعليق. 

في سطر " دالة التضمين 11006 والتي اضفنا بداخلها اسم الملف الذي يوجد فيه عملية الاتصال وبياناتها. في سطر 5 شرح لما في سطر " والذي 
يحوي نص الاستعلام بواسطة دالة الاستعلام 223501011639 وبداخلها طلبنا عملية اخراج جميع البيانات من الجدول 56010624: ثم اضفنا خاصية 
جديدة وهي 18377 01121018 والتي تعمي (رتب بواسطة) ثم حددنا ال10 ويعني الرقم ثم حددنا ماهية الترتيب وهي 110500 وتعني تنازلي أي آخر 
بيانات طالب تم ادخالها تظهر في البداية. وعكسها التصاعدي وهي 456.في سطر ١‏ أغلقنا كود البي اتش بي. 


من السطر ١‏ الى السطر ١5‏ أكواد تعلمناها مسبقا يمكنك المرور عليها ومعرفة وظيفة كل كود أو سطر. في سطر ١7‏ فتحنا كود بي اتش بي في سطر 
9 فتحنا جدول بواسطة كود 727317 وكما تلاحظ وضعنا خاصية العرض ٠‏ 705 ثم البوردير او الحواف وحددناها ب٠‏ صفر ثم خاصية التوسيط ووضعنا 
قيمة )»0 وتعني وسط. وسيظهر الجدول في وسط الصفحة. علما اننا نحتاج الجدول للترتيب والتنظيم. 


في سطر 7١‏ فتحنا صف وهو الاول وهذا الصف سيكون عبارة عن راس الجدول والذي سنضع فيه عبارات (الاسم - الجوال - العنوان .. الخ). لاحظ 
اننا فتحنا الصف الاول في 7١‏ ولاحظ انه انتهى في سطر .١7‏ من سطر 75١‏ الى ١١‏ عملنا خلايا بالترتيب الخلية الاولى في سطر 7١١‏ تحمل الاسم 
والخلية الثانية في سطر 7 تحمل الجوال وهكذا الى سطر 5 ؟. 


الجزء الثاني من الكود لصفحة «رطم.1201©:2 : 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأمداءعع]©0)مز :انمع 772755202 2:00967 8|118 0لا 


ما 


نذة نين نز نز ذ) 


4 ( (3111ع52) ي2231ت_طءععع2_لن دتتمددءع:2 ؟ ) 211 


تلدعع>" مله 

: "<20 />" . [ ' عتقد ' ] دمع 5 . "<20>" مرعهة 

:"<20 />" . [ ' 116طمتة' ]قعع؟ . "<20>" مطاعهة 

: "<لع />" . [ ١‏ 30026355 ' ]قمع 5 . "20<7>" مطعهة 

:"<ل0ء />" . [ ' 2066 ' ]قمع ؟ . "<20>" مطعهة 

: "<60 /><3/>حدق< ' [10] 210-5263 ططم. ©16266ع0 ' +-72ع0ط 23> 1 <3/>تعديل:< ' [10] 210-5268 ططم. 03ه ١‏ <-2عطط 20<>3>" قطعهة 


ذن 


0 
1 
2 
3 
0 
5 
6 
7 


ذ) تن ذبن 


1) 

:"<ة1طوع />" مطعهة 
2 

>/ 01< 

> / 20 03< 

<لشغط ار> 


كما نلاحظ من سطر ١5‏ إلى ٠‏ ؛ نريد أن نقوم بعمل إخراج البيانات من جدول الطالب في قاعدة البيانات وبما أننا قد قمنا بعمل الاستعلام في الجزء الأول 
من الكود سنقوم هنا باستدعاء البيانات حسب الاستعلام ونقوم بإخراجها كاملة بواسطة الشرط »71311 . فكما نلاحظ في السطر 5؟ داخل الشرط 771116 
قمنا بعمل دالة الجلب للبيانات (723501_111_213-230 للمتغير الذي فيه الاستعلام وهو 451116 وادرجنا هذه البيانات ضمن المتغير الذي سيقوم 
بعملية العد او المرور على كل صف في الشرط ويقوم بإخراج البيانات وهو و42 . 


في سطر ”١‏ فتحنا صف جديد »في سطر ”7” فتحنا أول خلية وهي للاسم ثم استدعينا المتغير و8456 أن يخرج لنا ما في الحقل في قاعدة البيانات الذي 
اسمه ع«ررج: ثم أغلقنا الخلية. في سطر ”” نفس الخطوة السابقة ويتم استدعاء بيانات الجوال الموجودة في المكان او الحقل »73011 في قاعدة 
البيانات ثم نغلق الخلية. وهكذا في سطر 4" وه” . 


في سطر 5” تذكر اننا مازلنا في نفس الصف أي أننا نمر على الصف في قاعدة البيانات نخرج الاسم ثم الجوال ثم العنوان ثم الملاحظات ثم نفتح خلية 
ايضا زيادة لنضع فيها رابط مكتوب فيه تعديل ورابط اخر رابط للتعديل. 


قبل شرح السطر 5” تعلمنا كيفية استدعاء البيانات كاملة من قاعدة البيانات هنا نريد ان نتعلم كيف نقوم بالتعديل على صف معين ولأننا نريد ان نعدل 
على صف معين فلابد من معيار معين يساعدنا في التعديل على الصف الذي نريده وقد ذكرنا مسبقا ان في قواعد البيانات وفي الجداول بالتحديد يوجد 
المفتاح الاساسي فيها او ما يسمى (12©3 211129137) أو رقم كل صف في الجدل له رقم محدد لا يتكرر ابدا. من هنا نستطيع ان نعدل او نحذف اي 
صف بواسطة هذا الرقم او المفتاح حتى لا يتم حذف او تتعدل صفوف أخرى. 


في السطر”" من بدايته الى نهايتة يكون بين علامتي تنصيص ثنائية " " لا تتكرر بداخله ونضع علامتي التنصيص المفردة ويمكن تكرارها على ان 
تكون بالشكل الصحيح. من بداية السطر إلى علامة الفصل | المستقيمة سنقوم بعمل رابط للتعديل بدأنا بعمل خلية ثم رابط يوصلنا للصفحة «رطام.)01© 
وهي الصفحة الخاصة بالتعديل وأن تكون بين علامتي تنصيص .نأتي للأهم لاحظ بعد اسم الصفحة مباشرة ([7101-9472©5]10م1م.031») قمنا بعمل 
علامة استفهام بعد اسم الصفحة والتي تشير إلى ارسال شيئ ما مع الرابط ثم عملنا متغير وهو 414 وأدرجنا بداخلة رقم الصف من خلال المتغير الذي 
يقوم بعملية إخراج البيانات بواسطة [9©5]10 .ويصبح المتغير هنا خازن لقيمة رقم الصف في حالة تم الضغط على رابط تعديل يقوم الرابط باخذ رقم 
الصف إلى صفحة التعديل وتقوم صفحة التعديل بأخذ الرقم للصف وتستدعيه لتعديله مباشرة. بعد ذلك اغلقنا علامة الرابط الاولى بعد علامة التنصيص 
ثم كلمة (تعديل) ثم أغلقنا كود الرابط. 


في نفس السطر وبعد علامة الفصل | ايضا نفس الفكرة تماما عمل رابط لصفحة الحذف واسناد رقم الصف للمتغير 810 لإرساله لعملية الحذف في 
صفحة الحذف «رطام.ء)ء1»1. 


لاحظ من سطر "١‏ إلى 5" تتكرر العملية مع كل صف في الجدول بواسطة الشرط إلى ان يتم الوصول إلى آخر سجل او صف في الجدول وكل صف 
يخرج في صف مستقل مع كلمة تعديل وحذف. قبل مشاهدة الصفحة او فتح المجلد نقوم الان بتعبئة بيانات للجدول من خلال صفحة «رطم.«2016ؤ كما 
في الصورة نضغط على الرابط (إضافة جديد): 
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ثانا 
> ذا 7 © ج« مضه ده مامءاء لما/ع:لمد/دهطاقءه! ا 


الاسم الجوال العنوان ملاحظات تعديل 


بعد الضغط على اضافة جديد ستظهر الصفحة «رام.125614 والتي تطلب بيانات نقوم بعمل بيانات عادية لثلاثة صفوف وسيكون شكل الصفحة الرئيسية 


مطام.ءدء 0م كالتالي: 
5 2 © « # م ملامءاءللأ/ع2لمنا 
اضافة جديد 
الاسم الجوال العنوان ملاحظات تعديل 
حسين أحمد 1 2ظ2 سوريا - حلب لا يوجد ملاحظات تعديل | حذنقف 
عامر عبدالجليل 1659 اليمن - عدن لا يوجد ملاحظات تعديل | حذف 
يوسف صالح 122*20455 اليمن دورة المواقع الالكترونية تعديل | حذنقف 


قمنا بعمل بيانات تجريبية كما في الصورة السابقة. 
صفحة «ورطم.)11)» : 


طريقة عمل صفحة «مطام.غ)01»© : في هذه الصفحة بعد الضغط على الرابط تعديل امام اي صف نريد تعديله كما في الصورة اعلاه تقوم الصفحة 
مطام.»0مؤ وكما وضحنا سابقا بارسال رقم الصف المراد تعديله وفي الصفحة «رام.016» نقوم بعملية استعلام من هو صاحب هذا الرقم من الجدول 
في قاعدة ابيانات ونخرجه إلى فورم كما في الصورة نقوم بالضغط على (تعديل) امام (حسن أحمد ) سيظهر في صفحة «ام.غ01» كما في الصورة: 


جال 


حال 10 -710 مام أ لعا/ع :ملم نا/دهطاهعها 85 ك 


الجوال 987654321 
العنوانت أسوريا- حلب 


لا يوجد ملاحظات 


تحديث 


كما في الصورة اعلاه تم استدعاء الصف المراد تعديله بواسطة استعلام من خلال ال11 التابع له. لاحظ الان الخطوة التالية هناك رقم ال10 للصف 
موجود في الرابط اعلاه وهو ٠١‏ ومشار له بالسهم, هنا نحتاج له في عملية التحديث. نقوم الان بعملية التعديل على البيانات مثلا نغير الجوال. بعد اتمام 
التعديل ونقوم بالضغط على زر (تحديث) وتقوم الصفحة بأخذ الرقم 10 لهذا الصف والذهاب لقاعدة البيانات وتعديل البيانات المعدلة للصف صاحب الرقم 
0: من خلال طريقة ال 7056 التي تعلمناها مسبقا. بعد التعديل يتم توجيهنا الى الصفحة الرئيسية بواسطة كود معين سنشرحه فيما يلي. 


وسيكون الكود الموجود في صفحة [طم.غ11» كالتالي: 


ل ل 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


حرطط2 > 
("صططم. و1 مه" ) ععنه_ع121110 


((['ع002ت ' ] 5_2051) 8ع155) 112 
1 


فخ نزخ ز) ظر (ر) 6١‏ ل- 


518 > 5 1 

: [ 'عستقه ' ] 5_2051 ع عنم ده 
:['112طم' ] 116-5_2051طمم؟ 
55 ']2051_؟-و5وع3002 5 
5166 _وحهع 2 520 


تن ما 


1طقت عغطء وص2دع33صم1/ / 
' 52056 ' >2056, . ' 520026353 ' -2002655 , ' 520511 ' -6 2011 , ' 52346 ' -23306 5151 351402256 212115" ) تاعاعناكى_لن دتتمدء 1نادع2 5 
100 ادادادادزن 


طم . +120 15 12 ,ع825© نادم 12 . 523966 04152512337 عغطع ه650 619ع01322ع2// 
: ("ططم. م1206 :2ه1ع 3م10" ) عع0ةهط 

1 

2 

حرطم2 > 

1نا مجع 104 وتض1م1ععع0 / / 

7 ؟ - 514 


4 2532511132 25215 طع31 355013560 043253 561682120// 
: ("5107>-10 م22 52110625 لنتتمعرع ‏ * 56126" ) لاع ناك_لن دنتست 1نادع 2 5 


( (3111ع52) 2217ة_طءطع2_لن دترتسددع2 5 ) 211 
4 
: [ 'عتقحس ' ] 5عع5 > عسقم؟ 
:['116طه2 ' ]وعع؟ > ع11طمم؟ 
:["002655 3 ']دعع5 > وو5ع55300 
:"06 ]هه تخ وهمزووه؟ 


في الكود أعلاه سنقسمه الى نصفين من سطر ه إلى سطر ١5‏ لن يتنفذ من الكود أي شيء مالم يتحقق الشرط في سطر 4. وهو في حالة ملئ الحقول 
بالبيانات المراد تعدليها بواسطة 720571 يتم التعديل في قاعدة البيانات. أي في بداية تحميل الصفحة وقبل ان نعدل يمر السرفر من هذه الاوامر ولا 
ينفذها الا بعد الضغط على زر (تحديث) لذلك يذهب للتنفيذ من سطر 77. 


الجزء الثاني من الكود: 


<لسغط>» 

<83516 />كةوع 23 خ21516<501> 

<0دعط> 

</ "152-8تع ع 25 قط :021ل /لععدعع "5-2 2ع 6 روه "0025625-15 "62-6011157 25 1653 
<مدعط/ > 

<01مط> 

<" :31150 0 :2082612 :400521 : ط6 1710 :251 : 5م310عءع2 031"-6 553121 01> 

<3/> الرئيسية<"22م. +1ا 2262-7120 83> 

< رع ط>< رعدط> 


ن) ن) ن) ر) ظر كير 
لزه |" إدف 15 (2 1 


في السطر أعلاه كود عادي 5" الى 4 ؛ عملنا عنوان في سطر 7” ثم كود اللغة (ترميز اللغة العربية) وهو مهم في سطر 94" في سطر ؟ ؛ عملنا ديف 
وبداخله خصائص الاتجاه من اليمين الى اليسار ثم العرض حددنا 1٠٠‏ بكسل ثم المسافات لليمين واليسار وجعلنا الديف متوسط في الصفحة. ثم رابط 
واسميناه الرئيسية ليتم التوجه للرئيسية في حالة التراجع عن التعديل. ثم كود للنزول سطرين في سطر ؛ ؛. 


في سطر 5 ؛ إلى 75 أنشأنا فورم الذي يقوم بعملية استيراد البيانات المراد تعديلها والكود كما في الصورة: 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا لانالانا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 ا اا8 0لا 


>10 211 23316-72012201 7 1216 112001>- "205127 3521 011>-”*”< 
2 


<"0"عدمع عمط ع1طةع> 
<> 
<50 /> الاسم <20> 
<20> 
<0ع /> <"<2 52372016 صمطعه تروطط2 > ١‏ >7731112 "عننةد"-237116 "ععزوج "7 6ع قاطت 1 > 
<2<ج /> 
<22> 
<0ع/> الجو ال<20> 
<20> 
<60 /> <"<9 57202116 وتلج© «توطط2 > ' -ه731112 "1167طمه”-231716 "5626 6126-7 انامطط 1 > 
دع > 
<ء2ع> 
<0< /> العتوان<0<> 
<20> 
<0ح /> <"<2:9 553002655 مطء© طامط 2 > ' -721112 "23716-73002655 "تعد ”6106-7 انام 1> 
<2خج /> 
<22> 
<50 />ملاحظات<520> 


<0ع /> <3ع2 جعزم /><2 :520562 صمطعه وترطنة2 ><" "حو بزوع "52"207 زو "2067"-237116 3ع2 3 جيزم ج ><50> 
<عع /> 
<2> 


<0ع /> <'<68:1]'104"[2:9_؟ قمطعع صطط2> ' -731116 "237216-10 "53104062" -61506 انامم20<>1> 
<20/><" تحديت”->731116 "23716-11202866 "6 قناطناكت "-61526 2115 20<>1> 
تخدع "ركه 
<ع1طقح / > 
خحسدمع // > 
<01 /> 
<20017/ > 


نأتي للشرح: 


كما ذكرنا سابقا من سطر 5 إلى سطر ١5‏ لن يتنفذ من الكود أي شيء مالم يتحقق الشرط في سطر 4. في سطر 4 شرط في حالة تم تنفيذ 100571 
الخاص بالقيمة 0121م والموجودة في الفورم 501:11 من سطر 5 ؛ الى 77. سيتم الدخول في محتوى الشرط. في سطر ؛ إلى سطر ١١‏ يتم عمل 
577 للبيانات من الفورم الى داخل المتغيرات. تقوم هذه المتغيرات باستلام البيانات بعد تعديلها والضغط على زر تحديث. 


في سطر ١4‏ إلى ١5‏ يتم تنفيذ التعديل على الاعمدة واستبدال البيانات القديمة بالجديدة الموجود في المتغيرات والمستقبلة من الفورم بعد التحديث 
بواسطة الرقم 10 الذي تم الحصول عليه من الفورم. في سطر ١8‏ استخدمنا دالة جديد وهي 18602067 والتي تقوم بعملية التوجيه عن وصول السرفر 
اليها يتم تنفيذ الأمر الخاص بها والتي تقوم بعملية اعادة التوجيه الى الصفحة «رطام.2:ع120. 


في سطر 7١‏ إلى سطر 5” نعود إلى ما قبل عملية التحديث : في سطر 77 نقوم بعملية اخذ رقم 10 بواسطة '7171) من الرابط المشار له سابقا ونضع 
الرقم 10 في المتغير 410 ثم في سطر 76 نقوم بعملية استعلام عاديه حول الصف المراد تعديله حيث نستورد الصف بشرط الرقم 10 كما نلاحظ في سطر 
5 بواسطة الشرط (11-910 عندعط7). 


من سطر 78 الى 4" نقوم بعملية جلب للبيانات الخاصة بالصف الذي سنعدله ونقوم بوضع كل قيمة في المتغير المناسب كما نلاحظ ذلك في الاسطر 
الى "8 


من سطر 45 الى سطر “7 قمنا بعمل الفورم الذي سيستقبل بيانات الصف الذي سنعدله وفي نفس الوقت الذي سنعدل فيه ما نريد ثم يقوم بإرسال 
البيانات لنفس الضفحة أو الشرط الذي تكلمنا عن انه لن يتنقة الا يان من الفورم. فى سظ ++ افتحنا فورم .واسميناة رون ثم تم تعبين. الطريقة 
517 ثم الاكشن (22)102) وهو الاهم فقد تعلمنا سابقا ان نقوم بعمل اسم الصفحة التي سيقوم الفورم بإرسال البيانات اليه بواسطة 20571 ولكن 
لأن التعديل والارسال سيكون في نفس الصفحة سنضع علامتي تنصيص فقط أي انه لا يوجد صفحة يتم عمل «:30)ء2 خارج الصفحة 7ام.)01» لذا 
نتركها فارغة أو نضع اسم م1م.011» . في سطر 45 فتحنا جدول ثم صف في 47 ثم خلية في 48 وكتبنا فيها الاسم ثم خليه بجانب الخلية ووضعنا 


١/0811: 009677 0 200000‏ 
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فيها حقل من نوع 6ه وقد تعلمنا سابقا كيفية عملها وخصائصها والاضافة الجديدة هنا هي 78106 والتي سنضع فيها بيانات الصف الذي سنعدله. 
لذلك كما نلاحظ الخاصة 7211 في السطر ٠٠‏ والخاصة بالاسم بين علامتي تنصيص نقوم بعمل استدعاء البيانات او الاسم الذي جلبناه في سطر "٠‏ 
من قاعدة البيانات. وهكذا مع بقية الحقول في الاسطر الاخرى. لاحظ في سطر 594 لم نقوم بإخراج الرقم 11 لأنه يعتبر سري لا يظهر للأخرين فقد 
عملنا جلب له ولاكن ليس من قاعدة البيانات بل من الرابط بواسطة '2191) واسندناه في المتغير 810 والذي سنحتاج له في عملية التحديث في السطر ٠‏ 
والسطر .١54‏ 


صفحة ودام.ء)ء061 
بعد الضغط على رابط حذف في صفحة 17[م.1306:2 أمام اي اسم من الاسماء يتم التوجة للصفحة «ام.»0616 وكون الكود الخاص بها كالتالي: 


حقطاط2 > 
211 2ه226210مه 042532356 528 1211103129 // 
("ططم. 219 همه " ) 111611106 


1ن ه22 04358 عطء كه 104 20و3طاعع0 // 
17 5 > 5134 


2321 تامع مامت عغطع وطوعء1ع0 // 
: ("510>-10 ع2ع72 56110626 22011 51:15" ) باع ناكو _لن ستنتمحتت 1نادع2 5 


1 
2 
3 
4 
5 
6 
8 
9 


(ططم. عد1206) 5266 0413551337 عطة ه50 3126ئء22 2203 // 
( "نم . عدع120 : 102 103" ) عع 0دعظ 
-2 


فم كم هم فم 
ت فر نم 


نين 


كما هو في الشرح باللون الاصفر. في سطر ” عملية الاتصال بقاعدة البيانات بواسطة دالة 1210016 والملف المستدعى هو «ام.ع02141» »في سطر 
" عملية الحصول على الرقم 10 من الرابط الذي تم الضغط عليه(حذف) وضعه في المتغير 410 ثم في سطر 1 عملية الحذف وهنا استعلام بعملية 
الحذف للصف الذي رقمه داخل ال10 . 


في سطر ١١‏ عملية توجيه للصفحة الرئيسية مباشرة بعد الحذف 1[7م.120©:2 حتى أنك عند الحذف لا ترى الصفحة ع061»4 فقد ترى ان العنصر او 
الصف الذي حذفته قد تم حذفه وتم اعادتك الى الصفحة الرئيسية. 


711000 #0 009677 :6 || 08/ا 
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١5 
التعامل مع الصور‎ 


إضافة الصور 
تعتبر إضافة الصورة بواسطة «دام مع ال719501 من أهم وأساسيات المواقع الالكترونية والتعامل معها سيكون بسيط إن شاء الله وسنقوم بتطبيق 
مثال بسيط حول كيفية رفع صورة إلى قاعدة البيانات وعرض الصورة على صفحة الويب واستدعائها من قاعدة البيانات. 
الجديد في تطبيق رفع الصور هو أننا سنستخدم الدالة الخاصة برفع الملفات وهي : 
((........9 و['23126_متتا"'] [...... كط رطط!ا5_1)ء11_ل0ع1020امس_ع ممصمل 


الدالة ()30102060_111_ع2207 تقوم بالتأكد من صحة الملف والمحدد في (5_1711,1:5) باستدعائها لتقوم بكتابة او نسخ الصورة إلى السرفر الذي 
فيه الموقع؛ وأم المتغير الأخير ( ..... يشير إلى اسم المتغير ويحوي مكان وضع الملف في مجلد خاص داخل مجلد الموقع. 


إضافة للخاصية الجديد التي سنستخدمها في الفورم وهي : 
9 ....'"-23116 ''ع11'"'حعم7]) الامرسك> 
تطبيق المثال: 


سنفرض أننا نريد أن نقوم بعمل قاعدة بيانات وبداخلها جدول ويحوي الجدول الذي يحوي رقم الموظف واسمه وصورته. سنقوم بعمل قاعدة بيانات 
وسنسميها حزم وبداخلها جدول أيضا وسنسميه حزم ايضاء وسنقوم بعمل مجلد 15298865 داخل المجلد العام 795938 وسيكون لدينا ‏ صفحات 
( مصطم.؟ة1؟ - مرطم.200 - مطام.ء0م1) وعمل كل صفحة كالتالي: 


طام.ء0مز : وهذه الصفحة ستكون الرئيسية ونقوم بإضافة الاسم والصورة من خلالها. 
مطام.200: وهي الصفحة الخاصة بعملية الرفع وإضافة البيانات على قاعدة البيانات. 
17: صفحة عرض البيانات مع الصور. 


مجلد وعع10:2 ايضا داخل المجلد و1326 الاصل لكي نرفع الصور إليه. وسيكون شكل الملفات كما في الصورة : 


< كعوقمما < تتععصا ١‏ محمقي ١‏ () عاز0 اهعما ١‏ ععغنمحممة ٠‏ لها 


ع هاه؟ معلا لييانانا > طاغابيا عرقطة > بمهعطنا ماع نساعمآ > عتامقو0 
52 مر لمم عغقم 2 عدولا عمس 2 
عنام عا /اه..| ععوهما لل ممماىك0 للالا 
268 غملع5 ميرم وله !>" كممهامه0 1[ 
118 مم5 مبرم ا 7 كععوام أمععع8 151 
118 مم5 ميرم مع 7 


قاعدة البيانات سيكون اسمها حزم بالإضافة إلى الجدول حزم وستكون كما في الصورة : 


ل ل 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


1١5 /ا‎ 


أيا ده طالدعه! » © عام » ]عام 
[5] استعراض | آكلا يتاء | [لل 501 | 3 إيحث | # إدخال | 8] تصدير | +5 استيراد | ©ى عمليات | 36 11109615 


0# الاسم توع 011100 الخواص حالي إفتراضي إضافي العملية 
2 101 (11)غ10 نا لاصىء [لالعاالاع008١ا_0آلاحم‏ م تغيير © ستّط هي أساسي |9 فريد [5 قبرست 75 |3]12م5 (2] النص كاماد [5] 1065ه/ 01561061 
]| 2 عممهم (3)222اء3/ أء_اوعمعو_وثأنا لا لاتىء 2م تغيير © سقط وي أساسي [ه3] قريد [ج قهرست 756 |3]13م5 [7] التص كاماد [2] 5عنااهلا 0151101 
]) 3 0غمطم (3)222اع2ق/ا أء_اوعوعو_قتان لا لاقىء تغيير © سقّط هي أساسي 0 فريد [5 فهرست 75 |2612م5 (©] التص كاماد [5] ٠/3/0085‏ 01511001 


[_ 9 تحديد الكلمع المح 26 استعراض ىم تغيير © سنَّط فى أساسي 8 غريد 26 فهرست 


كما في الصورة لدينا الأعمدة 10 ويعني الرقم لكل موظف وهو اتوماتيكي وهو المفتاح الرئيسي أيضا , العمود :روم للأسماء . العمود 711010 وهو 
مسار أو مكان الصورة على مجلد الموقع. 


صفحة «رطام.ءد1206 : 


سنقوم بعمل الكود الخاص بعملية اضافة البيانات من خلال الفورم الذي تعلمناه مسبقا بالإضافة الى الخاصية الجديد وهي خاصية المدخلات من نوع 
الملفات وسيكون الكود كما في الصورة: 


<0017ط> 

>01 5171716-03 263102 :251:" < 

<ععع 0م > 

<"2051 "27ت ماع غ212 "وطم . 7"300->522 3631 "202-0353 / 1011132326" - 2 ور 5*2 امع > 
<2ط><" عننة2" - 23112 "اعد 6" -122 عأنام12> إسم الموظقف 
<عط><”220250”-ع223716 "231167”-ع زط عناصم 11> الصورة 

<" اضاقة"-ع573111 "”170132طنات "” - 6126 6آنام2 1> 

>/ 20 << 

7 عقطله 

ار عجو 

<23/> عرض البياتات<"96طلم . تاه 2-753 2126 3> 

<ءع عع دعن /> 

> / 015< 

> /200177< 


كما نلاحظ الصورة أعلاه صفحة 16001 عادية داخل ال7003 في سطر ١‏ عملنا ديف خاص بالفورم ليكون الفورم في وسط الصفحة بالإضافة إلى أن 
يكون المحتوى ذو اتجاه يدعم اللغة العربية أي من اليمين إلى اليسار. من سطر ٠١‏ الى سطر ١4‏ عملنا فورم خاص بالبيانات التي سنرسلها إلى 
الصفحة [1[م.2010 »في سطر ٠١‏ قمنا بفتح الفورم ثم بدأنا بعمل الخواص للفورم بشكل عام أضفنا خاصية جديد للفورم وهي ©6م20)9© ووظيفتها 
تحديد نوع البيانات المرسلة للسرفر من الفورم عبر (20571) وأعطيناها القيمة 1111110211/10112-01242 وهي تستخدم حين يكون لدينا ملف لرفعه 
على السرفر. ثم قمنا بتعيين ال22)10 وحددنا الصفحة م.2001 ثم الطريقة ال7241200 وحددنا 20571 . 


في سطر ١١‏ حقل اضافة الاسم . في سطر ؟ ١‏ أضفنا الخاصية الجديدة للمدخلات وهي مدخلات من نوع ملف "7976-1816 ١‏ في سطر ١١‏ اضفنا زر 


النازدو«طاناد ثم أغلقنا الفورم في سطر 4 ١؛‏ وسيكوم شكل الصفحة كما في الصورة: 
- /ر7305أ/أدهطاقءه1 ذا 


كما 


إسم الموظف | 
الصبووة | فاع وومم2 | معكمطاء غ51 ملا 


إضاقة 
| 


عرض البيانات 


ا 0 /00967 :ع اا8 ١/0‏ 
م ١‏ أعجا.ه أم حاعع]0©1]أ :اأهماع 2 00967 :2 ااا كلا 


١/8 
صفحة م.2000‎ 


وهذه الصفحة الأهم وهي التي ستقوم بعملية الإضافة والاتصال بقاعدة البيانات ورفع الصورة إلى السرفر. وسيكون الكود كما في الصورة: 


<60037ط> 

حرطح2 > 

: "/89023هة" > «عدوعروح ؟ 

5322 '] [ '2020م ' ] 211:55_؟ ) عنتقدء 5ط . عع3290ع5 > عع ونروج 5 


22 ©5226 220121 12202813120113 اغططه ع2 311 5عع0 5خ121// 
[ 'عسهقم ' ] 2051_وعع سم م5 
' 2ق ' ] [' 2050م ' ] 211:55_؟) - 501 


8 
9 
0 
1 
2 


5 ناما 50 5قععع ده // 
: (()2202<ع_501ئ8) 01 اه ("" ,"2002" ,"106212036") عع دمن _لن كته 
: (()202طع_1و5تاس) 01 عده ("ه1صط")اطة_ععع1ع5_ل1ن دنامد 


6 5258 550 15202582102 فطع 3عع1ع1ا/ / 
("('ع1ص؟5' ,'عستمص؟ ') 5ظتانتقلا (م0عم0طم ,عسمص) 1م 11110 1115881") باعدعندكي_لودتم 


5627 526 50 2060م عط2ء 5ع181216// 

( (8عو2دءع5 [ ' 23306_مدع ' ] [ ' 050ظم ' ] 211:85_؟5) ©211_لع1020طنا_رعممس) 12 
1 

اه 311 125 12 تاميزة 18115// 

2",, تمت الاضاقة يتجاح" مطعع 

:"< 2 />عودة للرئيسية<'22ص.عزع120 '-2ه2526 33>" مطعهة 
1 

4 م15 

208 125 12 «مءععه و5ع617// 

:"لم يتم رقع الملف ..هتاك مشكلة" مطعهع 

: 

2 
<0017ط/ > 


ن) شر هن ١ت‏ ل مم6 


ذة دم يم ذم يم دم دم نن ين ننه 
مده 


كما في الصورة أعلاه في سطر ١‏ بدأنا كود البي اتش بي في سطر 4 عملنا متغير واسميناه 9427614 ووضعنا بداخله مسار وضع الصورة وهو 
/5ع12128 وتعني بداخل المجلد وع12128 . 


في سطر ٠١‏ قمنا بإضافة المسار الأول مع اسم قاعدة البيانات حسب الكود التالي : 
:(['212ه']['0)مطم'إكظطرط1ظ_ة ا)اعسحممعكدط . امع :2)؟ - اعع :)ةذ 


المتغير 821564 الأول اسندنا له مكان المجلد من خلال المتغير السابق الذي قبله بالإضافة إلى دالة ()ع72562:2 والتي تحدد نوع الملف وحددنا 
0 وهي اشارة إلى نوع الملف الذي سنرفع وهو من نوع صورة والاسم هو نفس الاسم للصورة أي يضع الصورة وبرفعها كماهي بنفس الاسم. 


في سطر ١١‏ عملية استقبال البيانات من الفورة استقبلنا الاسم في المتغير »511:2 ثم في سطر ؛ ١‏ استقبلنا الملف من نوع صورة إلى المتغير ع1م8 » 
في سطر ١‏ و8١‏ عملية اتصال بالسرفر وقاعدة البيانات. 


في سطر ١١‏ عملية إنشاء استعلام لإدخال البيانات إلى قاعدة البيانات من خلال المتغيرات التي استقبلت البيانات من الفورم. في سطر 74 قمنا بعمل 
شرط لعملية الرفع من خلا الدالة التي ذكرناها سابقا الجزء الأول من مدخلات الدالة [':8_111195]'012040'1]'31_13211 اشارة للملف او الصورة 
التي سنرفعها وعملية الرفع باسم موقت الى ان يتم الرفع ثم الجزء الثاني من الدالة وهو الهدف أو الصورة التي استقبلناها من الفورم. في حالة تنفيذ 
عملية الرفع سيتم الدخول ما بين السطور 5؟ و 14 وهي رسالة نجاح عملية الرفع ورابط الرجوع للصفحة الرئيسية. مالم في حالة حدوث خطأ يتم 
الدخول إلى »و1» ويتم عمل رسالة خطأ. 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأم داءعع]©0)م1[ :اتهمع ‏ 772755202 2:00967 8|118 0ن 


صفحة «رطم. 71677 : 


<0017ط> 
<" 21 :262302 5153716-03 0359> 
<ععمج ممت > 
حرطحر2 > 
2(" 1ص","" ,"2002" , "21203586ع10") عع صدمك _11ني 5 تتسحدمن 5 
(()220طع_ناعع 0دم_275011) 12 
1 
: ()202جع_نعع تدم _0725011 . " :117501 60 عععصدمه ه62 2311604" مطمع 
1 


("ه21 28011 * 55:11:01" ,دمن 5 ) باعناكو_11نو دتزم > 15نادع2 5 


( (5225111) 22317 3_طءطع1_2 1و كلتم > 7م52 ) 211 
1 


"<"10622"80 "120"-025 261 ' . [ ' 22060 ' ] مع ؟ . " / 52-1212065 37>" مطعه 21 
: "<عط>" مطعهة 22 

[' 252:2 ' ]بنه2 5 . " : الاسم" مطعع 23 

58 ب777773ج-777777777777777777-7-7-7-7ب77ب7بب7ببجز01 ا بي ييز (ثايت يكت 24 
: "<عط>" مطعهة 25 

26 1 

: (2مى5) 61035 _411و10153 1 زيم 

28 2 

<2ع2 2ع / > | عاص 

<017 / > | افك 

<37ق0ط/ > | الك 


في هذه الصفحة كود عادي ومتكرر لما تعلمناه وطبقناه مسبقا الجديد فيه كيفية وطريقة إخراج الصورة من قال عدة البيانات. وهي في سطر ١؟‏ قمنا 
بعمل كود إخراج وكما تلاحظ أن أي كود ,111711 ضمن صفحة 21317 لابد أن يكون بين حاصرتين " " وأيضا في حالة كان كود ر117173/11 وصادف 
أن خصائصه تتطلب حاصرتين نقوم بعمل حاصرتين متغيرتين عن الحاصرة التي بدأناها كما حددنا للطول والعرض في نهاية الجزء. وكما نلاحظ في 
الجزء الأول : 


''/وع5 2 ططاتءع:51 عنطز> '' مطاءا 
وهذا الجزء يشير إلى مكان الصورة أو المجلد والجزء الثاني: 
['مأمطم']لروترة 


ويشير لاسم الصورة التي تم رفعها للمجلد ونستدعي اسمها من قاعدة البيانات» في الجزء الأخير تم تحديد الطول والعرض لنستطيع التحكم في مقاسات 
الصور '<'1001"'80؟7 '"120'"'-)7طاواعط '. 


في سطر ١‏ ؟ نقوم بعمل سطر جديد ثم في سطر 77 إخراج الاسم ثم في سطر ؛ ١‏ سطر جديد بالإضافة الى خط فاصل وبعده ايضا سطر جديد في سطر 
5 وسيكون شكل الصفحة بعد تعبئة البيانات كما في الصورة: 


١/0811: 009677 0 71100‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


١6ث٠‎ 


2ت ها ننه ذا 7 © جا« د م محام.نناع الاردع و تمأ/أدمطاوىءها 5 | #© < م 


0 0 /00967 :ع |8 ١/0‏ 
0 َ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 00967 :2 ااا كلا 


بما أن المواقع الالكترونية تقوم بعرض بيانات سواء كانت خاصة بمؤسسة أو مواقع اخبارية فلابد لهذه المواقع ان يكون لها صفحات تدير البيانات من 
حيث الادخال والتعديل وغيره. وبما أن هذه المهام يقوم بها مدير الموقع فقط فلا بد من حماية هذه الصفحات وتقييد الوصول إليها بحيث لا يصل اليها الا 
مدير الموقع فقط وليس أشخاص آخرين. 


في المواقع الالكترونية تم إيجاد وسائل للحماية منها طريقة ال 517551018 وترجمتها باللغة العربية ( الجلسات ) وأيضا الى نوع آخر مكمل لها وهي 
وسيلة ال 2060011195) وترجمتها الكعكات. ويفضل تسميتها كماهي باللغة الانجليزية. 


الحماية بواسطة ال 515551010 


لحماية الصفحات التي نريدها نقوم بعمل كود ال517555160011 يجب تفعيل الخاصية بواسطة الكود التالي : 


حقطاط2 > 1 
: () 358326_ده1 دوع 5 2 
2 3 


يتم وضع الكود في بداية الصفحة تماما وهو شرط أساسي ومعناها البدء بتفعيل 5105510117. بعد تفعيل ال/510551001 نقوم بتعيين متغير 
ال510551017 وسيقوم السرفر بعمل (1ع 12111117 106121111261012 عنانأدن) وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر. ويكون ذلك 
بالكود التالي : 


5 -['غع ']58551011_؟ 13 


كما في الكود أعلاه نقوم بتسمية ال517551011 الخاصة بنا وهنا اسميناه 26م ثم قمنا بعمل قيمة معين وهي 575:5 في ال51055101717 ©22. وهذه 
القيمة هي التي تسمح بتصفح الصفحات المحمية. 


كما يمكننا إلغاء ال[510555160(1 بواسطة الدالة ( ):0©546103_رروزووهه كما في الصورة التالية: 


: () ناه20ع085_ده 1ددع 5 


١/1081: 009677 0 500‏ 
لام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


تطبيق ال517551011 


قبل البدء بالتطبيق وعمل مثال لحماية الملفات نقوم بتفعيل خاصية (ع111ع111اط 114م014) في السرفر الخاص بنا ©5107 772227 من اعدادات 


المررام كما في الصورة التالية : 


-- 


ها نسخ 
000 [81] م 1 > مه ,»د م 


الحافظة 5 خط 
3 


أس أساسى) اقيم 1١|-‏ -| هر " 


ازقلالا عثاق يرم لمع رمم 
غدمطاقءها (ه 


/ 
10 
0 

1 
9 

3 


وملوىع لا 


2 2 ودقء انط أنسمؤنه 2 |! 


وناطعل ممعم : (وبطء 0)0‏ أدطممم 
عاقمم :(وباطء00 ١‏ , نذا د )4 » 
تعووة1 عاطهمع ,غ1قام,ه : (وسماء0)0. 
و8 معمه رمك هر هتما 
1395 مكق 


أبجد موز أبجد هوز أيجد هوز 


1 بلا تباعد 


ابجد هوز 


عتوان ١‏ عنوان 7 


ة أنماط 
1510 110111315 1531111501 131110111113:101115311131115351011135 113111135 303111535 :2,1351311 
2215117110112 
ددادىعءمدمهء غنامناه زا إفضل تسميتها كماهي باللغة الانجليزية. 

طاعدااء غلك ةامصمة 
ععمعيعقع وعدم عدم القع عبسوااة 

مم عمد 
عنام عوممت ”ين 


كتملء ترقاموتك 2000 :5 
ل بي 585510١‏ يجب تفعيل الخاصية بواسطة الكود التالي : 


1 
عه وها يا 2-2 
جالة لكر كرد ريم ()عموعة5_دمزودعة 
عع ناهد لمعأمء معن عرمموا ا« 7 
كلقع اعم ممع يي 
5 83616 ا شرط أساسي ومعناها البدء بتفعيل [55101ع5. بعد تفعيل ال58551010 نقوم بتعيين متغير 
كاةطماو 915" وروزغؤوو قزم مول) عبوزمنى) وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر. ويكون 
كبرهكة ومما تعؤوزوعم 
اولة عونة عنوأوع 
عمو كعؤمنو عأوقمم 


لخاصة بنا وهنا اسميناه »جم ثم قمنا بعمل قيمة معين وهي 65/ في ال58551010 عم. وهذه 


:'5ظلا'»*[ 'عه']5_5555101 
عمتاميم كعؤمناو عأوقمم 
ع5 ةطبر كعامنا عأوقمم 
اك عاطقمع 

5ههامن عا ”ير 

معمه؟ ابن بسوااة ين 


عتوات 77 العنوات 


عناعما امن مااع 


تَ نقوم بتفعيل خاصية (عم1,عء#داط غدام+ده) في السرفر الخاص بنا معبمعد برصوديب من 


كممكمعق مزم بدء بالتطبيق و - 
أ0.مام [-| أادات الجروام كما في الصورة التالية : 
وما عم منرم 


كعءايمع5 اله 526 
كعءاممع؟ الش مهغ5 
عع ءايمع اله ماوع 8 


الا ماع وط 1[ رالا 


له >« ه »اص 


العربية (اليمن). |إكاته هع 5 عدديت ل 


كما في الصورة أعلاه نقوم بعمل كليك بالأيسر على ايقونة السرفر اسفل الشاشة على اليمين ثم نختار 2117 - وعمغ1غ]ء5 2112 - ]نامأناه0 
عد نط والضغط عليها إن لم نجد علامة صح امامها. 


مثال بسيط لإيصال الفكرة: 
سنقوم بعمل مجلد اسمه ::و1ووء5 داخل مجلد 77777 وعمل صفحتين ( «طم.2ة1مرصسيزه - مرطم.ء[امصسيزة ) . 


في صفحة «طام.1م102ه : نقوم بعمل كود وظيفته القيام بإنشاء 510551017 وخزن قيمة بداخلة ثم نقوم باستدعائها وإخراج القيمة . وسيكون الكود 
كما في الصورة التالية: 


حرطاح2 > 1 

: ()58322_صده551ع 5 2 

-['غ55551011]'12_؟ 93 

4 

5 ؟5 .' 5 731116 55551011 عناملا " مطعهة‎ 551011]'-2' ٠ 
6 2 


في سطر ؟ تم عمل كود تفعيل ال51755510017 من خلال الدالة ()4210و_دروؤوو»5 ثم في سطر " أسندنا قيمة داخل ال517551017 الذي أنشأناه وهو 
دم والقيمة هي 57105. في سطر ٠‏ طلبنا إخراج القيمة الموجودة في ال/517551017 ©22. هنا سيقوم بإخراج القيمة 57115. 


وسيكون التطبيق كما في الصورة : 


5ل : كا عله 58551011 عناملا 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عاونا 


أعراءه أم حاعع]©0]طأ :اتهمطع 


ع جا. 0 أم حاعع]. /الانانا نالا 


1١ *'هة‎ 


في الصفحة «ام.162مد:ذه سنقوم بعمل إنهاء ال51:5510171 الذي أنشاناه في الصفحة السابقة ونطلب إخراج القيمة هل سيتم إخراجها أم لا 
وسيكون الكود كما في الصورة: 


حططح2 > 
()56322_ده1دودع5 


'غع]01 ؟ ) جع25نا 

: () تامع 3ع0_مه1 دوع 5 

: [ "عمس ]55551011_ه5 ٠٠.‏ : 15 731116 558551011 ناملا" مطعهة 
-2 


في سطر ؟ طلبنا تفعيل ال510551011 ثم في سطر ؛ قمنا بعمل إفراغ لل510551011 ©2م الخاص بنا بواسطة دالة ()3564» في السطر ه قمنا 
بعملية إنهاء أو تدمير ال510951017 بشكل عام. في سطر ١‏ طلبنا إخراج القيمة الموجودة في ال5175510117 ©52. وسيكون التطبيق كما في 
الصورة: 


: كا 1الة5 585510117 كتاه لآ 


كما في الصورة أعلاه لم يتم إخراج القيمة لأنه قد تم إفراغها وتدمير ال5105510137. 


تطبيق الحماية بواسطة 519551017 : 


سنقوم بعمل تطبيق عملية الدخول للوحة تحكم مبسطة وتطبيق تقنية ال[5199551601 .نقوم بعمل مجلد داخل ملف 77775 ونسميه 1021وو©ه مثلا أي 
أسم للمجلد. ويحتوي الصفحات التالية: 


صفحة [12016:.11 وستحوي فورم تسجيل الدخول. 

صفحة «رام.«ذع10 والتي تحوي كود التأكد من كلمة المرور وايضا بدء عملية ال519551017. 

صفحة «رطام.0001126126 وهي الصفحة المحمية المحمي الذي لا يمكن الوصول له الا بعد التأكد كلمة المرور وبدء عملية ال5195510137 . 
صفحة «ام.0014ع10 وهي الصفحة التي تقوم بعملية إنهاء أو إلغاء ال[51955101. 


وكما في الصورة تظهر الملفات داخل المجلد: 


512 عميا1 70011 عغ03] علولا 
118 م5 ملزم ‏ 755+ م5/15١/15١7‏ لع تناع وك 7" 
18 .201 االل[ل عممعطع ‏ ١1ئت٠م5/.5/135١1١”‏ »عم © 
18 أملع5 منرم ١7بق+‏ م5/15١/15١7‏ منوها 5" 
18 أملع5 منرم 2 ه1بخ. م5/15١/15١7‏ غناموها 7" 


71100 0 009677 :6 || 08/ا 
ااام أعم.وأم داءعع]©0)م1[ :اتهجمع ‏ 772755202 2:00967 8|118 0ن 


صفحة [ددساط.د1:06 


ستقوم صفحة ال001غط.1206 بعملية أخذ البيانات وهي اسم المستخدم وكلمة المرور بواسطة الفورم الذي وبواسطة دالة ال70510 تقوم بنقل 
البيانات إلى م[م.2:فع10 وسيكون الكود كما في الشكل التالي: 


<" :251 : 2م 1ع6ع282 5153116-03 01> 
<عع ع دعن > 
<21/>تسجيل الدخول<21> 
<”222 . 7"109132>->052 3221 "1200-7"203527 116 1211 ه12 > 
اسم المستخدم 
 23116- "115 2237226" /<‏ "22 612502-76 أتنام12> 
</ عط> 
كلمة المرور 
</ "52355023"->23716 "5235501207" ->6156 6تامد 1 > 
</ عط> 
<«م/> 
</ "دخحول"-7731116 "15قاطنات "5126-7 21115 13> 
حمدمع /> 
<ععع موعن /> 
< 01 / > 
<20017/ > 


كما تلاحظ الصورة أعلاه أكواد بسيطة تعلمنا مسبقا عملها » نلاحظ في سطر ” ١‏ استخدمنا بداية الفورة واستخدام الطريقة 700571 والأكشن حددنا لها 
الصفحة 17م.12ع10 . في سطر”١‏ إلى ١١‏ عملنا حقول لاسم المستخدم وكلمة المرور وتم تعيين ال0مجر للحقول ثم زر 51:14 وأغلقنا الفورم 
في سطر ."١‏ سيكون شكل الصفحة كما في الصورة التالية : 


ولو المخطءعدء ل1/10دهأووع5/أوهطاةءه! 


صفحة «رام.صزع10 : 


تقوم هذه الصفحة بعمل مقارنة بالبيانات التي سيتم ادخالها مع اسم المستخدم وكلمة المرور في الصفحة نفسها بإمكاننا تغييرها كما نريد بعد عملية 
المقارنة وتحقق الشرط يتم إظهار رابط للصفحة المحمية ويتم الوصول لها. في حالة عدم تحقق الشرط يتم اخراج رسالة خطأ. وسيكون الكود في 
صفحة مام.ذع10 كما في الصورة: 


١/0811: 009677 0 550000‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع ‏ 772755202 2:00967 08118 


خريظام 2 2 

-52ه551ع 5 

2- 

< "2101 / 1999 /روع<ه . 173. 7071 / / : وعاعط"-200125 لسعط> 

<0دعط> 

</ "2-8 كعم وتدقطه : تغط عجعج "حتت صم ع مه "عه 6-1 لضت دهن "15-2 ناوه لوطاغط 16> 
<212516/> الدخول للصقحة<2518516> 

<مدعط > 

<0017ط> 

حرطح2 > 

12 )5_2051 ] "11521233046 " [ 7" 20034122" غغ‎  5_2051 ]"23551020"[ --"123"( 4 


: ' 5ظلا ' >[ 'عط ' ] 58551011_ه5 

:"تم الدخول يتجاح"وعطعع 

ع"تجوكرة: الملف المحمي<< '222. 022تتات 00 ' - 2 عطظ >" ممع 
) 


احلقت 

()553226_ده1ودووع 5 
'10'-[ 'عط ' ] 5_55551011 
:"هتاك خطأ"مطءء 


19 
20 
21 
22 
23 
24 


في السطر ١‏ إلى تم عمل الكود الخاص بال817951010 وتم وضعه في بداية الصفحة. في سطر ٠١‏ تم البدء بعمل الكود » في سطر ١١‏ قمنا بعمل 
الشرط الخاص بالمقارنة داخل قوس الشرط كتبنا [''©58_2005711115613212 إذا كانت (--) وتعني تساوي "20:13" أي أننا استقبلنا العبارة 
المدخلة أو اسم المستخدم من صفحة 10016.8631 بواسطة الدالة 20511 _+ للحقل ©1ج2رءون ثم بعمل المقارنة -ح ثم حددنا الاسم 20:11 
كاسم المستخدم ويمكنك تعيين الاسم كما تريد. ثم (:284) وتعمي (و) ثم عملنا مقارنة أخرى للباسورد ١١7‏ الذي قمنا بتعيينه ككلمة مرور. 


في حالة تحقق الشرط وتم إدخال اسم المستخدم وكلمة المرور وكانت مساوية ل (20112-123) سيتم الدخول لما بين القوسين !) في سطر ١‏ تم 
عمل ال517951017 الخاص بنا وتم تعيين الاسم 72 وتم تخزين القيمة 57109 والتي تسمح بتصفح الصفحات المحمية. في سطر ؛ ١‏ يتم عمل رسالة 
بانه تم الدخول بشكل صحيح. في سطر ١5‏ قمنا بعمل رابط للصفحة المحمية وهي م:1م.000112:621 ٠»‏ في سطر ١5‏ أغلقنا القوس. 


في سطر ١8‏ ه19 في حالة عدم الدخول بشكل غير صحيح يتم عمل الاجراءات ما بداخل القوسين الخاصة بع19» وهي كالتالي : في سطر ١5‏ البدء 
بتفعيل ال[51055101 بواسطة :(548:60_«و1وو»5 ثم في سطر ٠١‏ يتم خزن قيمة 710 داخل ال510551017 وهي القيمة الخاصة بمنع التصفح 
للصفحات المحمية. ثم في سطر 7١‏ إخراج رسالة خطأ. في "7 أغلقنا الكود. 


بعد المرور بشكل صحيح وادخال اسم المستخدم وكلمة المرور الصحيحتين ستظهر الصفحة كما في الصورة : 


م4 


© ١ 5 ملام.دأوه1/1صمأودع5)/5هطاقءو|‎ 


تم الدخول ينجاحالملق المحمي 


يقوم المستخدم بالضغط على الرابط (الملف المحمي) والذي يوجهنا إلى الصفحة [1م.00002214 وهي الصفحة المحمية. 
صفحة «رطام. )دا ددد 0 


هذه الصفحة هي مثال للصفحات المحمية داخل الموقع والتي لا يصل اليها المتصفح العادي وانما مدير الموقع او من هو مخول بذلك »ومن خلال مثالنا 
هذا وبعد ان يدخل الموقع بشكل صحيح وبعد ادخال كلمة المرور بشكل صحيح ستظهر وبعد الضغط على الرابط (الصفحة المحمية ) ستظهر كما في 
الصورة: 


1/08١١: 009677 0 51000‏ 
امي أعم.وامحاعء1©م]م1 :اأهمع ‏ 772755202 2:00967 08118 


١ كه‎ 


محام اصع7ناء1501/00ووع 5/5و طأقء0| 5 | © >« 
اليبيانات المحمية 
تسجيل الخر وج 

وكود الصفحة كما في الصورة التالية : 
حططاح[2 > 


: ()52322_ده1ودودعء 5 
4(" 55" -! [ "عط" ] 05_558551011 3142 
: (" لمطاظ . عد1206 : 105215102" ) عدع ه126 
1 
2 
<لتغطع> 
<520ع2> 
</ "2-8 جاجع 5قطقطه : تغط رععرموع "عتج ررم ع نمه "7م758 25-1ع 2ه "0111-7 2-5 225 18> 
<قمدعط > 
<0017ط> 
<2/> البياتات المحمية<2> 
<3/>تسجيل الخروج<"222. 22672-71090011 32> 
<017 0ط > 
<لشعط > 


كما نلاحظ في الصورة أعلاه في السطر ١‏ بدأنا كود بي اتش بي وفي سطر ؟ بدأنا بتفعيل ال517551017 »في سطر ” قبل عرض محتوى الملف 
المحمي تم عمل هذا الشرط للتأكد من القيمة 57105 في ال5105510117 ووضعنا شرط ('971:5'-16)4_5105510177]'926'11 ويعني إذا كان قيمة 
ال11 5105510 عدم لا تساوي 57105 (حيث -! معناها لا تساوي) في هذه الحالة نقوم بتحول المستخدم إلى صفحة 1201©:.001[1 ونمنع عرض 
المحتوى نهائيا حتى يكون معاكس للشرط. في حالة كان نعم أي أنه يساوي 57705 نقوم بالانتقال للأسطر الأخرى وهي عرض محتوى الملف. بكامله. 
نلاحظ في سطر ١‏ رابط مكتوب فيه (تسجيل الخروج) بعد ان ينتهي المستخدم من ما يريد في الملف المحمي يقوم بإغلاق الملف بواسط الضغط على 
الرابط (تسجيل الخروج) وهنا يأتي دور صفحة مام.105004 والتي تقوم بعملية إلغاء ال510551017 نهائيا. 


صفحة إام.)دامع10 


في هذه الصفحة تتم عملية تدمير أو إنهاء ال510551017 والتي تسمح بتصفح الملف المحمي والفائدة هنا أنه اذا قام مدير الموقع بالدخول للوحة 
التحكم أو الصفحة المحمية وأنهى عمله عليها يقوم بتسجيل الخروج كيف لايتم الوصول للصفحة من أشخاص آخرينء لذلك تسجيل الخروج هي عملية 
تدمير ال17 51095510 أو الجلسة. 


كود الصفحة «رطام.11امع10 


1م 2 
:()55322_صمه1دود5ع5 


]5551011 _؟) عع 5 تنا 
: ()322017ع0_ده1 دوع 5 
: ( 201 ظ . 12206 : 02 1ع 103" ) عدع 52830 


نظ زن كر ل 


6 


١/1081: 009677 0 2000‏ 
لامي أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


١ /اة‎ 


كما نلاحظ الكود أعلاه في سطر ١‏ بدأنا كود بي اتش بي ٠‏ في سطر ؟ بدأنا بتفعيل ال5175510(17 في سطر ؛ تمنا بعمل دالة إفراغ القيمة نهائيا من 
ال510551011 عدم الخاصة بنا بواسطة الدالة ( )64ع25ن. في سطر ه تمنا بإنهاء أو تدمير ال511551017 للموقع بواسطة الدالة 
(2_0651:0390زوزووهو » في سطر " يتم التحويل للصفحة الرئيسية [7دغط.<1206 . 


ملاحظة (حاول الوصول للصفحة م0012614.01 بواسطة الرجوع لها بالرابط او الرجوع للخلف بواسطة المتفصح بعد تسجيل الخروج هنا تكمن 
أهمية ال515551010). 


الكوكيز (0001615:5) 
الكوكيز عبارة عن ملفات نصية يقوم السرفر بحفظها على جهازك عند الدخول لموقع معين ويتم التعرف على الكوكيز مرة أخرى في حالة التصفح لنفس 
الموقع وبتعرف السرفر عليك أو على جهازك من خلال الملفات التي وضعها على جهازك سابقا. 


عند تصفحك لموقع يدعم الكوكيز ودخولك بشكل صحيح يقوم السرفر بعمل ملف كوكيز صغير جدا لا يتجاوز حجمه 4 كيلوبايت في جهازك بأمر من 
السرفر للمتصفح. عند خروجك من الموقع وعودتك مرة أخرى يقوم المتصفح التابع لك بإرسال الكوكيز للسرفر فيتعرف عليك السرفر فيتم دخولك 
للموقع مباشرة دون طلب لكلمة السر. وهذا ما نجده في المواقع الشهيرة التي نستخدمها فمثلا فيس بوك أو تويتر أو بريد الكتروني عند دخولنا للموقع 
وإغلاقه دون أن نقوم بعمل تسجيل خروج فإن ملف الكوكيز يضل مخزن في ملف بواسطة المتصفح بحيث اذا تم الدخول مرة اخرى للموقع يتم الدخول 
مباشرة دون طلب لكلمة المرور. 


الفرق بين ال 51551011 والكوكيز 00016115 


تخزن الكوكيز في جهاز الكمبيوتر وتخزن ملفات السيشن في السرفر والأكثر استخداما هو الكوكيز ونستطيع التحكم بالوقت الخاص بالدخول للموقع من 
خلال الكوكيز خلافا للسيشن عند الدخول للموقع من خلاله ونسيان عمل تسجيل الخروج بالامكان الوصول للموقع ولو لبعد وقت طويل . بينما في 
الكوكيز يتم تعيين وقت معين للسماح بالوصول للملفات المحمية مثلا ؛ ؟' ساعة أو ؛ ساعات أو ١‏ ساعة فقط حسب نحدده نحن. 


طريقة إنشاء الكوكيز: 

طريقة إنشاء الكوكيز بسيطة جدا وهي عن طريق دالة في موجودة في ال2117 وهي دالة ( )61000112 الوصورة العامة للكوكيز هي كالتالي : 
001112112(5 ,12)ه2 رعنتامء وعسلد؟ رعسحصماعل1ممعنء5 

كما نلاحظ أعلاه الصورة العامة للكوكيز حيث : 

2312 : اسم ملف الكوكيز. 

ع1ج: وهي القيمة المخزنة للكوكيز. 

ع1زم1: مهلة انتهاء ملف الكوكيز. 

0 : وهو مسار المكان الذى سيتم ارسال الملف اليه على السيرفر. 


هو اسم الموقع الذي يمكن له الوصول لملف الكوكيز والتعديل عليه. 


500000000 0 00967 :|| 1/08 
لامي أعم.وامحاعء1©م]م1 :اأهمع 2 772755202 2:00967 08118 


١م‎ 


معظم الخيارات أعلاه في إنشاء الكوكيز اختيارية وسيتم إنشاء الكوكيز والتعامل معها عن طريق بعض الخصائص المهمة والتي نحتاج لها في إنشاء 
صفحاتنا المحمية. كما ننوه إلى أهمية وضع كود الكوكيز قبل المحتوى في بداية الصفحات المحمية بنفس طريقة السيشن. 


يا / نيه ١‏ < < « 
٠4»‏ »و 


كما قمنا بعمل السيشن سابقا سنقوم بعمل الكوكيز بدلا عنها وعلى نفس المثال السابق وبدلا من استخدام السيشن سنستخدم الكوكيز. وسيكون لدينا ؛ 
ملفات وهي : 


لصغط.ءء06م: : صفحة إدخال البيانات (كلمة المرور والمستخدم). 
مطام.د«نعه.آ: عملية المقارنة لكلمة المرور وعملية التصريح بعمل الكوكيز. 
مطم.غدعدصسسء120: الملف المحمي. 


مطم.)نامع1,0 : ملف تسجيل الخروج وإنهاء الكوكيز. 


سنقوم بعمل مجلد اسمه 20012165 داخل المجلد 7787 وسنضع الصفحات المذكورة أعلاه في هذا المجلد كما في الصورة : 


كعءلاممء <١‏ تخللكا ١‏ محصقين ١‏ (كن) عاوانا اهعما <١‏ ععغنمصممن ١م‏ ا 


عع لام؟ بمع لا م8 * طاغانها عرقطذ » بموعطنا ماع نساعمآ > ععاموو:01 
1 8 5 :. 
512 م1 011 ع:03] عصمةلذا عم اترويوع جحلو 
118 +مقع5 منرم مهبع.م 7١15/5/7‏ لمع مناء 6ك أ" ممخاىء 0 للالا 
118 ...20 ااال[ عممرطع ‏ ١1ئا٠م‏ 5/13 -/15١؟‏ عم © كمه امييره0 لل 
118 أملع5 منزم ‏ 7مبع. م15/5/51١7‏ منوها :5" وعءواه غمععع8 رك 
118 +مع5 منزم ‏ 09:558.*م ا غناموها 7" 


صفحة [ددغط .1006 : 


تحوي هذه الصفحة الفورم الخاص باسم المستخدم وكلمة المرور هي نفس الصفحة تماما التي تم شرحها في السيشن كما في الصورة : 


> © ا + هه مه اممغطعع لم ة/روءفاممء /أدووطاةءه| 5 | © 3 


تسجيل الدخول 


أنخ فيكم 
كلمة المرور | 


١/1081: 009677 0 5700‏ 
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صفحة «رام.صزع10 : 


تحوي هذه الصفحة عملية المقارنة لاسم المستخدم وكلمة المرور وهي نفس صفحة السيشن باختلاف الكوكيز فقط كما نشاهد الكود : 


حرطح2 > 1 
2 
 5_2051 ]"23551020"[>--"123(‏ عع "2023122 ">7 [ " 115622324" ] 5_2051) 112 3 
1 4 
: (3600 + () تلتتتذع , ' 72155" , "عد" ) 56001136 - 
"تم الدخول يتجاح" وطعع 6 
خ تن رج الملف المحمي< '222. 116225تات 00 ' > 1عطظ 43>" مطعع 7 
) 8 
ع5 9 

غ1 

:"هتاك خطأ"مطعع 
: 
2 


في سطر ”" تم عمل المقارنة واستيراد البيانات من الصفحة 011غ 1206.8 بواسطة دالة 00517 في حالة تم الدخول بنجاح وكانت كلمة المرور 
صحيحة يتم الدخول لما بين القوسين لل6ؤ (ما بين سطر ؛ وسطر .)١‏ في سطر ه بدأنا باستخدام الكوكيز فبواسطة الدالة ()0]00016؟ قمنا بعمل 
كوكيز للمستخدم فكما نلاحظ أسمينا الكوكيز 02 ثم عملنا له قيمة وهي 5109 ثم حدد الوقت بواسطة () 01:2 واعطينا قيمة للوقت وهي 3600 + 
وتعني "65٠٠‏ ثانية وتعني ساعة كاملة حيث ضرب ٠١‏ ثانية في 5٠١‏ دقيقة يصبح "٠٠٠‏ » وهكذا يتم التصريح للدخول وبالوقت المسموح. في سطر " 
رسالة النجاح في الدخول للملف. في سطر ؛ رابط للملف المحمي. 


في حالة عدم تطابق كلمة المرور من خلال الشرط /1 يتم الدخول إلى »19» ومابين القوسين الخاص بها ففي سطر ١١‏ تظهر رسالة الخطأ. 


صفحة «رطم. )داع د00 


هذه الصفحة هي الصفحة المحمية من خلال الكوكيز وسيكون الكود الخاص بها كما في الصورة : 


حقطحط2 > 
4 ('5ظلا*>! ['عس' ] 00038 _؟) 2خ 
: (" معط . عدع120 : 1035105" ) م2630 


</ "2-8 تج تع 25 قط :25201 رع عرعج "6225-7 5 2م "7"005525625-1756 552-61131752 25 11653> 
<مدعط /> 

<0017ط> 

<2/> انبياتات المحمية<2> 

<3/>تسجيل الخروج<"522. 1اموه10"-2عطط ه> 

>/20017< 

<لمطعط > 


كما نلاحظ في الكود أعلاه في سطر ؟ تم عمل شرط وهو في حالة كانت قيمة الكوكيز ليست 35795 يتم الدخول مابين القوسين لل16 ويتم التنفيذ للسطر 
" وهو تحويل المستخدم مباشرة لصفحة الدخول 15016.41 وعد اظهار الملفات المحمية. وفي حالة كانت القيمة 57105 يتم الاستمرار في الكود 
للصفحة وعرض ما فيها. 


في سطر ١١‏ عرض للرابط (تسجيل خروج) وهو التوجه للصفحة «[طط.1050116. 


7100 0 009677 :6 || 08/ا 
ااام أعم.وأم داءعع]©0)م1[ :اتهجمع ‏ 772755202 2:00967 8|118 0ن 


صفحة ام.1ن0ع10 : 


كما لاحظنا الرابط أعلاه (تسجيل الخروج) عندما يقوم المستخدم بإتمام ما يريد في الصفحة المحمية يتم الضغط على تسجيل الخروج لإنهاء الجلسة على 
الصفحة وإغلاقها يأتي هنا دور الصفحة [1م.1050114 والتي تقوم بعملية إنها الوقت الخاص بتصفح الصفحة المحمية. والكود كما في الصورة: 


م22 
: (3600 - ()1762ع ,"55ل ' , ' 26 ' ) 565050116 2 
: ( "1ط . غ120 : 1ع 1053" ) دع نوعط 3 
2 4 


كما نلاحظ الكود في سطر ؟ تم تعين قيمة الوقت الخاصة بالكوكيز وهي 3600- أي إلغاء الوقت الذي تم التصريح به مسبقا لنفس الكوكيز والقيمة التي 
أنشأناها. ويتم التوجيه مباشرة بعد تسجيل الخروج إلى صفحة البداية 1206:.421 حسب السطر ”. 


ملاحظة : تعتبر الكوكيز والسيشن من اهم المواضيع في عالم المواقع الالكترونية والتي تعتمد عليها جميع المواقع الكبيرة؛ بالإضافة إلى أننا استخدمنا 
امثلة بسيطة حولهما كما ننوه إلى أن هناك طرق أكثر أمنا من الدالة '50571. سيتم استخدامها ان شاء الله في التطبيق العام والأخير في هذا الفصل. 


0117[ الجي كويري 


1017117: هي عبارة عن مكتبة مجانية في الجافا سكربت مبرمجة بواسطة المبرمج +1251 10112 وتحوي هذه المكتبة الكثير من الأكواد الجاهزة 
والتي تسمح لنا بإضافة تأثيرات جميلة على صفحات المواقع الالكتروني.( الجي كويري عبار عن أطواد من الجافا سكربت.) 


سنقوم هنا بالتعرف على تطبيقات الجي كويري وفائدتها على المواقع الالكترونية من حيث إضافة المؤثرات والجماليات على الموقع بالحركة والشكل 
علما ان تطبيقات الجي كويري تحتاج لشروح كثيرة حتى يتم إتقانها والاحتراف في انشاء تطبيقات متحركة ومؤثرات وهنا سنتعلم كيف نستفيد من هذه 
التطبيقات فقط وكيف نقوم بتركيبها ومن أين نحصل عليها. 


إضافة مكتبة الجي كويري 


في البداية قبل إضافة أي كود أو أي تأثيرات من الجي كويري لابد من تحميل المكتبة الخاصة بال61-7 1ن( (ملف جافا سكربت) من الموقع الرسمي لها 
أو أي موقع آخر يدعمها 11رم». 1217 1:0://(0/ كما في الصورة : 


5 7 © ا + 4ه م 61١‏ لمعنل[ 3 © > 


ناه نكر 01 ملا كأمعبط عأناط نومت 5متوناط 


اكع و8  )©(‏ ./إ77017 531/6 ,77 علاج5 1 عن 2" 


,0565 +8 ,كا 5/لاه60ط +300 5أ غ165 الاك سيف 
.5عء أناعل عاأطمص +50 300 لمكا , للا 


© ممراعه؛ 1 م1 


لقع لاعنا0ز عط لاط ونا 


لنعيحتك غأ1مممناك بعكثزه 8‏ كرتلوسا ع 810‏ 6050دأمعمبءه0 اطمظ لدملوسمن 


باع نوز 0دهأديتزه هم 


1.11.0 20 


21/8 10117 


0 0 /00967 :عا اا ١/08‏ 
١ 0‏ أع .وام حاعع] ©1010 :اأهمع 2 00967 :2 عااا8 كلا 


1١5١ 


كما في الصورة أعلاه نقوم بالضغط على الزر البني الكبير (01©1:97[ 1901721080) »سيتم فتح صفحة آخرى كما في الصورة : 


.1 لزع نالو 


20109نومنا ع3 ناملا )أ 7أوناام عغ3ىوناا لعن از عطا عدن 350 ناملا 136 10امعع] ب/ز[و ,5/0 علالا .19.0 لاعن0ز أ0 35 د5ع309اء 0503[02 230ل عمزا “1 لمعنمر ع1 
9 لإاعنالز 1 300 ع10نا6 ع20نوملا 1.9 لمعنوز علا 0هع2 .260لمن معع6 أعنز مع/لد! 126 75أوناام عذنا 0 0لع06 0 لمعنالز أ0 51005)ع/ا 1.9-ع]م 00مم] 
1 01 ع0 106 54مم وماط عدوعاعر 


1-0 لاعنانز رورملاع ن لمعم _لعدمعمدرمءع عا 1020 نانا0 0 
1١0‏ لإاعنال)ز أمعدممماعلاع0 _لعددع م درمعون عا 1020 اناهن 
٠.10‏ لإماعناكز ,15 عاز؟ مودت عط 1020نثاه 0 

065 ع35عاع] 1.11.0 لإاعنانر 


.2 لاع نالو 


لإامم3 ع10نا© ع520وملا 1.9 لاعناف] علطا ما 5ع غأ00 عط الط 8 ,ه ,7 ,6 /ت/0/جبدع أء77/ع/7/ 600/1ناى 701/ 0025 أناط ,“ا 1 لإاعنالر 5ج أطظ 006د5 عذأا كهط “.2 لعنانز 
00تأأدأنا ع3 5ععكن 6/7/8 عا 00 (الهلاعء ع3 ناملا 55ع|تانا لممأىاعلا )ا 1 عط ونأكنا لداع اتمعع] عثالا بممححممء لإأعياتاواعع اناك عد 6/7/8 عا ععواك .ااعنن 5ج معط 
لإاانأأععقء ععامه عدوعاع, 2.0 ع(أا لدع عدوعاط عأزدو عا 


2 إاعناهز ورمتاءن لمعم _,لعددع ممع عط 1020ننناه نا 
20 لإاعنالهز أراع درمواعلاع0 _لعددع:م 77امع دنا عا 1020 اناهن 


0 لإاعنالز ,15 عا مودت عا 1020ننثاه نا 


00165 ع5وعاع] 2.1.0 لاعناك[ 


نضغط على الرابط الأول في 2.2 إ“رءن©1 . بعد الضغط على الرابط (2.1.0 0116157 21:00111661011 ,012321:655©0ه عذط) 0دملسحتوط) 
ستظهر الصفحة التالية : 


2ت كك > © ا < ”# د اححح حت ا 3 جا »> 


/* 256عع0/11و2ه . ناعنك 3 | .12 ,25م2ع ق0صتاه5 نز301062 2014 ,2005 (ع) | 72.1.0 لاععن30 !*/ 

6265 3091421" ) 0ش 218 #امططع (232عتننا 00 . 3 ! ) 41 (2) 2م عع تناع : (0 ! ,3) 52 2ع تنا 00 . 3>-1260255 . 25001116 2602155 . 2001416 0ك مزح" عجم ع وطه" 72200141666 02م مزع -"عىه قطه" ) (طرة) لماع صتاعء ! 
حتتطا, 30201 ة . حكن , تاعتاج. ع-ح2 ,عاسعصهن تع ر,مع 512 . عحل , [] 722 (ط, 3 ) 22©23102ناع , 2345 : 171200172112401 مع لاع ! 022122207 نا" ) ( (2) 2: 1 (2) 2 اطناعاع2 : ("222تتات 040 2 16 12001 8 

6 (ط,2) 2 ناك تتنناع2ء2 ,1و / ( ]١48-21[‏ ) - /عي , /-قه-* /عم , ( (طرة) 1215 .هي .0 267 لناء ع2 ) طرق ) م عاك 2ن عه ,"07 1. 2"2 ,226 تناكت 40 . 3 , )>1 ,لنقطع . " "ع1 , 2617 285019222056 . لك 3 1ط 205 . 15 , 14 
11420<7ناظ تناع 426 (3) 5302 جنا : 06 , ( (5 خطع) 211ه .4 اتاعدباع ع2 ) () 02 تنج تناع : لاأقاعنقهء ,0 : 16529 ,"" : دمع 5616 ,0 : 5022 ع اطع 6025 ,2 : د11 65*03 تلات 200ص . مععوع . ه: ( () 2856ع ووتامء . ط 

معناعه2 ر (ه, () #مععتاطع قطمه . قخطع) عوطعس. معط 2م47 (2) دم1ععصناع :عق 5 لاقناط , ( (ققطع) 4.311 : [2] قخطة : [طعودة1 . مقخطع +جة)] ققطع 

2ا 22 4 ( ,مط) 102 :تناع , 6235 ) طغلل. 0) 2115255321 . 5215 2ناء 22 4 (2) 253102 نا : طغلد, ! لطع ,233ع) 2ع .0 2اناء 22 4 لطم غ) 2102 نناع : طع2ع , (ط ,عد 2025 . 5-5215 02522 . ط, 3 3ط 2عع 6570563 2م . ط 

اع 6 () 53102ج ناع : 1251 , ( (0) 64 . 6215 ا لاطاناءط ع2 4 () 2©53102,ناع : 232515 , 7 ( (261155ن1 22 , 562315) 202117 . 4) ع1ا1525532اط. 52315 2اطناطاع2 )4 () 2102ج لنناع : 5116 ,1 ((7 (ط,رء ,ط) 8.211 

لاع 26 ؛ () 12م نع تناع :2ه , 7 ([] : [ [ع] قخطع] 7<طعع0><ح ) عل52 525 ناط. 6215 2ناء228 : (0<32:0 ) +2 +ىتت ,162062 . 3 خطع-ط 47332 (3) 02 نع تناع :60 , 1 (1-) هوه . ققطة 

]011١‏ 6255ناء ته رع ره ,رع رطرة 432 () 102ع 622622022 .223 . 00 ته جعزه . 0 , 5351161 . ء : 521316 ,5522 .ء : 50522 ,2 : 1ك قاط , ( (21111) #امععناطاء 5جمه . 5 1ع |[ [ ع6 52657053. ققطع 

>!21111) 12 (+خط:ط<1: (--2, 15طع>و) عع1- , ((4>و) ١١|‏ (9)ت2ملدععص5ن5.152| [و 5معمنزء-ع-"”"عءن» زطه" , (+خط , ( 4 | | [ط] 625:ناو: قبت ,و () 066 02ع ملاع" نوع 6001" ) امع : 1 ! > 3 رطع ولع 1 . 625تنا 13 , 1خط, 4١‏ 
: (ع) 2ء2 2521213203 . ه0غغعع>2 : ( [] :20 (©) 582221 1 . مغعع>2 ,1 !عع ) 2ع) 7 ( ( (34) 2217 قد . مدع ) | | (4) عع»ء 352123120563 . 0) غع4غعغ (3) عغع41>- ! و , [ط] عتف , [0] وتته (2 152 ط) مغ ( ( [ط] دع سعستوجموحع) 

27 0ط 4 (3) 02 نج تناع : 2022اطاع ,0 ! : 1586303 , ("" ,رو /ط١ا/)‏ عع12دة2 . ( () 22204020 . 113+ ص) +"21 30106" : 3200 طكدء ) ) 0ع جعدء . 0 , [0 ا لاناناط22 : ( (3> [ط] و) غع3>- ! 0 70134: ( (0 ,2 , 3) لدعجهاء . ه> [ط]َ و , 4١‏ 

26 ؛) (3) 102 جنا : 15113230401 ,212317 تك 1 . شاعنا : 5222317 1 , ( (3) عططزياح . معسسحد" رون ناج اننا " تناع 14226 (3) 531202 نا : 15210565320152 , () () مجع تناع : 2002 , ( (2) مدع ظ 

(8) دمل1ععصتاك ب عع 1581831503 , (0>< (ق) 2565108 3-53 لاطتاعه2 ) (2) لماع قناع : 1511621 , (50091 21 , وعددوع 6ق ! 11ناطد 

(طاطءعةه [1 !2<<تاعاع2 ( ( "1582001002 " , 22050110 . 2114050 025ه . 8) 11ه»ه . 3 ؛! 21120266 025» . 2 ) 2210412 :1 ! #طاباع2 ( (2) 2511152001 . ١‏ | اعم:12ع200 .2 ١ ١‏ (له) عملا . هع ! "عوع 3طه" ) 112 


٠١‏ لكر 


بعد ظهور الصورة أعلاه وهو في الاصل الملف الذي نريد تحميله نقوم بعملية حفظ الملف من خلال الضغط على حفظ باسم من خلال المتصفح كما في 
الصورة : 


١ك‏ وم 2 © خا + 2ه مه 1.0115 2-/إاع نا 0ز/6010.لمعناوزع00ه 8 |  ©#‏ جح -» 


اخامة للتفيدلنا /* عقدعه 13 وده نامعن 3 | .152 لماع مقصناه2 بدعنو3 2014 ,2005 (ه) [ 2.1.0+ تزععدوة بغر 
لاا +اة6 امال صانم معلل قط ( 6 2ع تنا 40 . 3 ! ) 41 (2) ملع ع لداع : (0 ! ,3) 26 2ع تنا 00 . 3>-601255كدء . 220001016 622602255 . 20001016 02ج مزح "نجع زطه0 "20014166 مع مزح "عن زطه" 4 (طرة) لممداعء صتاع ! 
ا . 2 ,6ق 02ح . عع رمج 511 . عت , [] عه 4322 (ط,غ) 02 نج تناع ,62315 : 171224012112001 مع ملاح ! "062126347ئننا" ) ( (3) ط: ( (83) ط ناعاع2 : (22عتتتتا40 2 165 12001 5 


الا اح و 15 -م3١]‏ ) -/عب , /-مم-* />5, ١‏ (طرة) 22.121 .0 2617 ع2 ) (طرع) 02 1ط اكه , "1.0 . 2"-12, 12 لتنا 00 . 2د, 1-7147 ,لتنشطاع . " "ع1 , 27 282505222026 . 2ك و ,روطع 205 . 15 , 11 

٠‏ عارعدمامه8 42 (3) 2م عع تناع : 06 , 7 (215ع) 211 . 4 تناح 26 4 () 5302© تناع : 202222233 ,0 : اطع ولع 1 ,"" : 5616012 ,0: 520122 ع اطع 601225 ,2 : لطاع 014 43 1526 202050 . ممع . 5: ( () 62856 روتام .ط 
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1 1 60م حت" نت وطن" : 23+77 211113 22 إناع 26 4 (3) 1531-0122© اع : © طالاع , 07 ! اع 26 : 1 ! لئاع 26 (2 12 ط) مع مط 47822 (2) 2م لعج :داع : 5ج 6 510583 ك5 1 , (0 ! تناع 26 (1 ! معدناعطعصط )4 
2 ("عع21ع5 م5" ) 1206202 . ق: 1) 266 , (2) تتنواطاع . 3>0: 0-2731 ,ط 47332 (3) 10ج تناع : 01032115531 , 21 202 طلاء : "عم 3طه" | | [ (8) 11هء. 5]1 

5 معان " ,2) 6ع13طع: . 3 لزاع 26 4 (3) 052 12خ ع تناع : 16356 ظتتتقت , ( ( (3)ء : ( (ط) 7605114 متتع2 . 23262225110046. (ط) 622062114 0ز©طة . 3,124.26 طعرعع . ط, (" مط 5" ) طعمدة 11م ع قمعت . وسط©ط) 

5 >2 ,20هع ,04 47322 لك رطرع) 02 1طع تناع : طعمع , ( () 201-06203253 . >>> ( ) ©201:012202356 . 20061137226 . 200461126663 . 2 . تناع 422 (ط,2) 102طء تناع : 2004116 , ( ( ,و) عع12طع: . (" 

نيت سين ]2 11هع .طعة) 12 رججعرع<2 : ) دمع ؛ (و) 12 م152 (علقءطط (1 !سحل , (ء , [ع] 3) لال1غصمة . طحة) 12 (ه صة ع) ممع م152ه (عاقعطط (1 إعسحق , (ه , [ع] 2) 1صمة . طحة) 12 (ججع رع<ع : ) مع 14 
لطعت 2م (ط,غ) جاع :1ق طنئعع1 215 , ( (3) 211 .1: 21111327 لئاع 26 4 (3) 302 2ناظ2 : لتنوطاع , 31 دنا 26 :علقه2ط (1 ! حدق , ( [ع] د ,ع , [ع]3) 11دع . طكق) 12 (5 152 6)عمع 

.ع موقط مغ مآ مواك 2120© تناع : ©29ع2, ( ( ,2 ,5) 9.211 : 2111-52-1 اع 426 (© ,2,2) 531012ك قناع : يتاتتشصة , (ء , ( (2 ,ء) 2.8211 : (2: [2] 27 #معويزء >>" 5120 5" رع ) عودعد. 20 ( قا عمع 053) 5) 

> ,كن 2ت ) دمع 4 (ء رطرة) تمع ع تناع : طز226ن , (3 ,عختطع وصط16 .3 تدباعع2 : [4] طء [+جع ] ه (++ك :3< تلطع وله 1 . قعع ,00 رطعودعء 1 . طجدعى ‏ 

كوملماءع5 >1 , (ق) قط ,لع ودع1 .دعيو ,2-0 ,0 782 زه رطرة) 1ط ع تتاع : طرقه, زع 2اناعاع2 : ( [2] 3) لأقناط. عغعغطع> !0 , (ع , [2] 2 ) ط! عق (+جع زع <و نح !خط رطع ودع 1 . وعيو , 20 , [1] 

عصمممطء عاومه6 غنامطم 220 , 1: ناو , ( (2 , [] )2221177 .ع ناط22 : (4) 32 ناط. 63غ34- ! 21111 , (ء ,2 , [3]2) ط>ق (3 12 )ه25 ع215: (4) 2دناط. 13غغ4- ! 21111 , (ء ,2 , [2]21) طحق (++ع :2< و: ) -ه2 (5) 12 : [1] 

لطاع 26 )4 () 012 1ض كع ناخ 2 , (2 , 61255نننن1 2 3 ) 5211 . 8234 ) 7 (3) 152052531052 .05, (عق ,رقءتط, [ط] وعم ) عغع2 6602ناج >" و اطع 5 "انان 26 : 2 رعرع 

إزادلها لنء طاتنا11 ضوع 8001" ) طعقع . 0 , (11: 2202نات ,201 . 201:23 , 0 7014: (2 , ++ 1نان . 10 14ناو . 0-3 1ناو . 8ل ذناو . 2 , ( ( ( (6255تناو2ة) 5311 .3) عقعدمه .ء رققطة | [ط) ق1اصمة .ه 

722 (2) 5 102جع تناع : (( () 201-0162356 . ط> [" ["+ط+" نجع 083] "] 42 (ط,2) 2م 1ع تناع , (" ") 53011 . "ع«معاعطظ اعمع وط0 ومرظاوعم 

0 +51 +01 فلنتا ه صة 1-طعع0<طععط #مم مزع" عع طستاط" | | مععدل | | عععك" زوز مرق " : 0 ! 7 طعع 11:56 2006 . ق عد 1 : 1 ! 7 ( ) :1511150015 . ه | | كك" موعت تناء "لطاناعع2 2 (3) عطلزع . معت رطعودة 1 . وعط 


ا 0 /00967 :عا |08 اا 
أع طا.0 أ حر حاععغ. نا نالا ناا 


أع جاءهأم حاعع]©0]أ :الهماع 2 00967 :2 ااا كلا 


١55 


ستظهر كما في النافذة التالية : 


سد مدع © 
ب / 5 الثم 
آم 0<" لب#سورضكم؟ | 3 بمعنوز ١‏ سمب ١‏ ممم ١‏ () داه ادءما ١‏ عاسمصمك ١‏ 1 ف )و 


© حدق علاه؟ معلا > ععنمدو0 


5 00 ممم عدم 5 ممقلا م 
ممغاى0 1[ 
ا" - 
عععدام غمعءءم 33 


.جع هعد نامز مأعؤقحم كجمعة1 ملل 


كعمهمطنا 29 
كمع صيهه0 3 
عأكدالا الى 
ععدمام إك 
دمء1/٠‏ [ك 


منمموع مرولا رك 


عنام مم6 لا 
(ع) عادزم ادها ملك 
(:0) عمساملا معلا وى 
(ع) عمساملا معلا ىت 
(ع) عداملا معلا وت 
عممطم! و/ع نامز التكا 


تنا 0 


متم.21.0-توعنوز بعممم عاط 


:عم ك3 ع/ضه5 


دع لامع علألا ب 


أنشأنا مجلد في 775075 وأسميناه 011617 لوضع المكتبة الخاصة بال7077[ فيه كما في الصورة أعلاه نضغط على حفظ (52976) سيظهر داخل المجلد 
كما في الصورة : 


م /وعسوزرهممء؟ |[] ىه | - لمعنوز ١‏ عع ١‏ ممعي ١‏ (ع)عادت0 ادعما ١‏ عشمممك ١ح‏ يل 
ذخ بد ]| ععلاه؟ معلا م8 > لياع قد > بوومطنا ماع لساعم1 > عتامقو0 
52 حانانا ممم عؤوم 9 عمقلا 110 
82168 عاك أمله5 أمقعول ‏ ١هبةء‏ م 7115/5/8 صنم.0. 21رمع نوز !©" ممغاى0 11 
035 انه 1 


كععدام غمعءء8 25 


نقوم الان بالدخول لأحد المواقع الداعمة لتطبيقات الجي كويري ومن خلالها نتعرف على تطبيقات بدائية ونقوم بتحميلها لمجلد 17ران[ والموقع هو 
على الرابط : [دصخطاد.5م0تمع :“معن 17/[0عنان زلحة زد/اعط. منلسق 5ه :55.1 //: كط 


ملاحظة : في الأمثلة التالية سيتم التطرق لبعض الخصائص للتطبيقات وسيتم ارفاق جميل الملفات مع الكتاب. 
مثال :١‏ 
سنقوم بتحميل التطبيقات على المجلد وسنمر على بعض التطبيقات لنتعلم كيفية تركيبها وتشغيلها على مواقنا والتطبيق الأول هو كما في الصورة : 


9 ححا 2 حمق / لاع نان ز/ نما طظالن ارح ححاة انان ///نعاة ذا 


5000 0 /00967 :ع |ا8 ١/0‏ 
١ 0‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


5 


في التطبيق أعلاه مثال بسيط ولكن من خلاله يمكننا عمل شيء مميز في موقعنا وفكرته في عرض وإخفاء الديف الذي يحمل النص مع اللون البرتقالي 
الغامق يقوم بإخفائه بشكل حركي جميل وكذلك العرض في هذا المثال قمنا بتحميله من موقعه الاصل ثم غيرنا بدل الجمل الانجليزي جمل خاصة بنا 
باللغة العربية ايضا ترجمنا النصوص الخاصة بالأزرار وغيرنا حسب متطلباتنا ورغبتنا والكود الخاص بالمثال كما في الصورة: 


<20ههع2ط> 
<51716> 
1 [ 2102:1622 :م3 : 2001م :4890 : فستامع وعاء 3ط 4 مدرد 
<©56171/> 
<25 5321 /><" 2126 335 [ /رطتاع ع " تك مزاع " 5 ز . 20312. 0 . 1 . 21-2ع ناك 3" ج52 86م1عن 5> 
</ "2-8 اتج 225 قش طه ‏ : للشطط /رععدعع "6-2 نع ج مه "0025625-15 "1115-2 2-6 25 20653 > 
<مدعط/> 
<7خ2001> 
ل ابتك 
<6502 قاط/> إخقاء <"طةق 3ط" ->10 هت 0تاط> 
<115502ط/ > عرضص< "طلنآمط5 "10-7 6602 تاط> 


كن م4 22.25 زف رزم |" إدق (0٠ا|‏ 


<" :31150 0: 20820612 :40021 : 171062 :30022 : 216و 5261 :261 : 266105 6-7"03 55371 01> 
<5532 />قي<5222> <56322 />يك<5232> <5032 />مرحيا<55032> 
<55032 />كويري<5232> <532 /> الجي<55232> <59232 />تطبيقات<55632> 
<5032 /> المواقع الالكتروتية<535232> <352372 />دورة<55632> 


<01 / > 
<1525ع52> 
؟ () 202831602 ) عا 11ح . ("طقتط4") ؟ 
1 () 20226102 ,"235" ) 2106. ("1103طع- 135 : مقمهد " ) 5 
: (©2116عء . 3217162255 . , "2352" ) 231046. () 27م . (15ط]) 5 
)1 () 81602ع2م2) عل 11ع . ("ط#تمطد4") 5 


: (2000) تاتمط5 . ("صهمد" ) 5 
11 


فم نزخ ن ظرم ص 656 ل 66 ها تت 


2 
2 
2 
2 
2 
2 
2 
2 
2 
2 
3 
3 
3 
3 


<«1ع2ء5 /> 
<عع ط دعن > 


فم نِم ز) ظر 


نب 


دائما عندما نقوم بعمل اضافة تأثير جي كويري أو سلايدات أو أي تطبيق فأنه غالبا يتكون من ثلاثة اشياء رئيسية وهي : 


روابط الملفات أو المكتبات الخاصة بالتأثيرات والجي كويري وخاصة الجي كويري لابد من وجودة وأحيانا يتم اضافة ملفات أخرى بجانبه خاصة 
بتأثيرات معينة وكما في المثال السابق في سطر سته ربطنا ملف المكتبة الذي حملناه بالصفحة وعملية الربط هنا شبيهة بالربط مع ملف 055 . 


الدوال الخاصة بالتأثيرات وهي نفسها من تتحكم بالتأثيرات وتنتجها ومن خلالها نستطيع التحكم بالتأثيرات من خلال الوقت والطريقة وغيرها وفي 
المثال من سطر ٠١‏ إلى ”*” هذه هي الدوال والدوال جمع دالة والدالة هي (3010) كما تلاحظ الاسم في الاسطر المذكورة ونأخذ من المثال الدالة 
الثانية من سطر ١5‏ إلى 7٠١‏ لاحظ طريقة تعريف الدوال في الجي كويري مختلف عن البي اتش بي كما نلاحظ الاسم المعن للدالة (#5120395) الذي بعد 
علامة هاش (#) اسم للدالة اذا اردنا ان نستخدم الدالة من أي ديف نقوم باستدعائها بواسطة هذا الاسم كما في السطر ١7‏ تم استدعائها من خلال (10) 
كما تلاحظ وكتبنا اسمها لذلك عند الضغط على الزر الذي يستدعي هذه الدالة تقوم الدالة بعملها او وظيفتها وهي عملية العرض. ومثلها الدالة الاخرى 
عند استدعائها والضغط على الزر الذي يستدعيها تقوم بوظيفتها وعملية الاخفاء. 


نلاحظ أيضا وظيفة الدالة في سطر ٠١‏ من خلال (() 011016)100©0105.) وتعني أن الدالة تعمل بالنقرة (1101ن): في سطر "١‏ حددنا (4501) ويعني 
هنا أن التأثير الخاص بها سيكون تطبيقه على ال(72:2و) ايضا ((519015)2000.) وهنا كلمة 519018 تعني عرض والقيمة 7٠٠٠١‏ هي مقدار الوقت 
لتنفيذ الوظيفة و٠‏ تعني 7ثواني وبإمكانك التحكم بها تغييرها حيث ٠٠٠٠‏ تعني وخمس ثواني وهكذا. 


المكون الأخير وهي العناصر المطبق عليها التأثير والتي تستدعي الدوال أيضا وهي كما في الأسطر ١‏ إلى ١9‏ قمنا بعمل (50212) متعدد والفكرة من 
التعدد هنا عمل الحركات على كل (59012) كلا على حده. 


5200000000 0 00967 :|| 1/08 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


مثال ؟: 


إضافة (0010ع22) من احد الاضافات التي تضاف الى المواقع وهي كما في الصورة (بعد تعديله بالعربية والاتجاه من اليمين الى ايسار وتغيير 
النصوص) : 


نف 1 7 © « ل« م 2 نأ.5 جزحزة لزاع ناو ز/الاللالنا ةلت /ر/عاة  ]5‏ © جه »> 


كما تلاحظ الصورة أحد التطبيقات للجي كويري والكود الخاص به كما في الصورة: 


<0هعغط> 
</ "2-8 ص 1احتعع 5ق طه ‏ :لاع ل /رععدعج "5-2 2ت ص 2م "0025625-15" -115اه 5ت 20 0663 
< / "قوق /ععاعح ”>6 زع "11652667 261>"5 "255 . 113 -2[7 116 3 / © 52610655235 /8 . 1 / نالا 112 1325/3 /غ:ة 23 /لقتم» . 60096163235 . :3 33 / / : طععط">-2ععط 1م11> 
<25 21ت 5 / ><" 5 3 . ال . 217 116 4/3 . 217/1 116 3 /1125 /3:2 33 /لتام» . 0600961632315 .332 33 // : مع ط"تن2 5 5م1ةعء 5> 
<125ن 5 / ><" 35 . 122اة. 1162217-113 8/3 . 1 /1انانآ2 6 ناك 1125/3 /غة 33 /تتام» . 0600961632315 .غ33 33 / / : طم ع ط"صتن2 5 جمر1وعء 35> 


ضف شر لا 66 


<2155ع5> 
1 ()102غ تدع ) 222037 . (عسعستاءم4) 5 
: ()2ه01مءعه3 . ("ده تلع معه 3 #4 ") 5 
1 
<15عء53 /> 
<فدع 2 / > 
<" :55 . 62 : 5-5126ه2وع "-55316 تتم ط> 


هم د 
هت ماه 


ف 
فم 


هم فم هم قم قم 
ذم نت شرام 


مم 


<"251 : 2م 1ع 043126 :31150 0 : 208296312 :50051 : ظ13146”-6 5531 "0527 2343م0ع "30-7 03> 
<3ط/><ة/>عنوان 1<"#"-#عطط 3<>3ط> 
<017> 


6 
8 
9 
0 


<3ط/><ة/>عنوان 4+4"<2"-#عطط 3<>3ط> 
<01> 
<م> 
هتا تص ...هتا تصإ 
<م/> 
<01 /> 
<3<>/23/> عنوان 3<"#">-#عطط 23<>83> 
<01> 


هم زم ذي) كلم ل ١‏ 


جم فم يم يم يم يم نم يم يم يم يم يم نن نب 


في سطر 7-5 تم اضافة المكتبة واستدعائها من الموقع الذي قام بعمل التطبيق كما نلاحظ الرابط لموقع جوجل قسم الأجاكس. يمكننا الذهاب للرابط واخذ 
الملفات التي تم ربطها ووضعها في مجلدنا وهو الأفضل. وكما يظهر أمامنا الدالة في سطر ٠١‏ الى ؟١.‏ 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا نالا لاا 


أع جاه أمحاعع]©0]مز :اتهممع 2 /00967 :2 ااا كلا 


مثال ": 


..مثال لتطبيق سلايدر 


كما في الصورة أعلاه ولعلك قد شاهدة ما يشبه هذا التطبيق في مواقع كثيرة ويسمى (511061) يقوم بالتعامل مع الصورة وعرضها كشرائح هنا مثال 
بسيط وهناك تطبيقات أكثر جمالا من التطبيق أعلاه واكثر جاذبية واحترافية ايضا. والكود الخاص به كما في الصورة: 


</ "15-8-خ ع مناقطك : 25101 رع عدمع "> رمع مه "مزاع -25ت 5 لمن "-11177 22-5 25 11653> 
<2125ه5 /><" 5 1 . 031122 . 0 . 1 . 6277-2 ناك 3" 52-2 "23125 2735 3 /عجاعع "6-2 لاع 5م1عء 35> 
١ 52>"635151104621 .7 . 35 "<>/ 5 2155<‏ "2125 26/335735 5106-7 5م215 35> 
<" 37356215 و عجعج "ماج 5م21 35> 
) () 62 1ط عتتمع ) 017دع2 . (عطعستك 040) 5 
) ) 283515113 . ("ع45133") 5 
تامف تزعحانكت 
, 226 : 2110115 2531م 
© :21 عتتاط 
1 
1 
<12عء5 /> 


</ "2معع2 5 ">2060313 " 5 5ن /طنزع ص "-06ا "261>"5:211551216657 " ق قت . 262 5 / 055 "2262-7 1121> 


<0دع2/> 
<60037ط> 


<"2 53126 مه ">-310 01> 


ص س0 


<"2ع320ع2">->10 01> 
<21/>..نثال لتطييق سلايدر<21> 
<01 /> 


© ل م ما 


لم ذم نم نم نم يم يم يم ين 


- 


<"2ع5110">-10 01> 


<111> 
<11/></ "226716 1356طتتع 1 315-055 ”3260 . 0116211 65/3 15050 "52-7 1100 >< 11> 
<11/></ "2265167 1356جتده1 315-055 "3260 . 0116212 5/3 171366 "5352-2 17200 ><131> 
<11/></ "22671 1136 315-055 "3520 . 0116213 5/3 52-7171366 11<>3172090> 
<11/></ "22651 101356 312-655 "31560 . 0116214 513665/3ة "5352-2 1726 ><131> 
<11/></ "ا 226751 1221366 315-055 "3520 . 215 0116 5/3 52-7171866 11<>13700> 

>/111< 

<0415 /><01 / > 
<نم0ه0ط// > 


ذن) ش) تب) ش) ثب ثب ثب ثب 
هم نِم ن) شر ا 65 ل 


0 ها < 


ذن كر 
ت 


كما نلحظ الكود أعلاه في الدالة والتي تقوم بعملية تحريك الصور وكما نرى الخصائص الخاصة بها وهي 140هوتعني أن تقوم الدالة بتحريك الصور 
بشكل اتوماتيكي في حالة أعطيتها القيمة ©1) وتعني نعم أو صح . في الخاصية الأخرى 204111010115 وتعني الاستمرارية حتى لو تم تحريك جميع 
الصور والوصول للبداية مرة أخرى يتم الاستمرار في حالة تم اعطاء القيمة 16 وعكسها »819 . الخاصية الأخيرة هي 2101126110 وتعني عددية او 
رقمية كما نلاحظ الارقام في صورة المثال. 


0 00967 :عا |8 0لا 
أع .0 أم حاعع]©10أ :انمع 2 067 :2 ا اا8 0لا 


أع جا. 0 أم حاعع]. /الانانالانا 


أع جا. 0 أم حاعع]. /انانانا نالا 


2ت ها ده 5 < © + # د 


اجمخطيعدع لس ة//01/1 لابلاع 10 1ك / لاع ناو [/ لالظ ملام حم ة نان ///عاة ذا © 


مرحبا بكم في دورة المواقع الالكترونية 


من خلال التطبيق أعلاه نشاهد احد الامثلة الجميلة للجي كويري ودورها في إعطاء الموقع منظر جميل ومؤثرات جاذبة للمتصفحين ومن خلال المثال 


أعلاه سنقوم بتركيبه في التطبيق النهائي للباب الخاص بال7112 . يتكون المثال السابق من الملفات التالية (كما في الصورة): 


7 ا < الاللااعلتاد ١‏ عبوز <١‏ عن ١‏ مصدس ١‏ (م) ادام ادءما «١‏ عتمصهك «١‏ .. ]لقح 


© |517| 32 'علاه؟ معلا مس8 > طابر عمقطد > بووعطنا ماع لساعمآ > ععامقو0 
52 م1 50011 عغ03 : عصمولا - عدون كك 

عام عااع 7 غدل إل ممغادء0 !111 

؟عاه؟ عا 7 عمنوص لال كمموامهه0 ل[ 

38 ...26 الكت عممي 7 عام © كععءوام +معععم 5 


يحتوي المجلد الأول على الصور الكبيرة والصغيرة للسلايدشو ويحوي المجلد الثاني على ملفات الجي كويري وملفات الوي اما الملف [7غط.»:ع120 


فهو الملف الرئيس الذي فيه التطبيق وسيكون الكود الخاص به بعد بعض التعديلات كما في الصورة: 


<"2701 ع« / 1999 /ريع<ه . 73. 01لا / / : مع ط">-125مهد لسعط> 
<20هع2> 
<281516/>سلايد شو<51516> 
</ "1152-8 256 قطك ‏ : لاط ط /ععدعج "025625 "51526 -0256115ج "111527 2552-6 106583> 
</ "32011521ج معنن 3 ,511335077 تأدعناك 3 ,5110 11011" مع عدم "2035م عع[ 237016-77 21253> 
</ "5 5ع . 5116 /6291261 "2262 " ق قن /6جزعج "1106-7 "261-51165266 1121> 
<2125ن 5 / ><" 3 و . 17 1ك 7221/3 1وطء "ج52 "37352156 و رعجزع ع "6106-7 6م215 35> 
<مدعط/ > 
<" #070707 : 102همع-01120 دوعا 3ط"- 5211 0037ط> 


>01 10-7015131 0462-025323122621"< 

<111><" 13535>"5_171205ه 01> 

<751_0"/<>/11ه"->10 "نبرحيا يكم قي دورة المواقع الالكتروتية"->©6151 "عتوان 1"-315 "320 .0تتتطا 3217531161 2ه / 1702065 / 025321 "5120-7 وذ >< 11> 
<751_1"/<>/11ه0”"-10 "عنوان 2"-61516 "عتوان 2"->3215 "350. 08562 /1508065 /02531"-51 190 ><11> 

<151_2"/<>/11ه0"-10 "عنوان 3"-61816 "عنوان 3"-315 "350 . 1702065/2170222966235 / 02521 "52-7 وسة >< 11> 

<151_3"/<>/11ه0"-10 "عتوان 4"-51516 "عنوان 4"-315 "3290. 10295/36112152 /08521"-520 وسة>< 11> 

<51_4"/<>/11مه"-10 "عنوان 5"”"->512516 "عنوان 5"->315 "350 . 5111125 / 1508665 /03531">-52 و1 >< 11> 

> /11<>/ 017< 


<017><" 665 11ن1اط_5" 1355 01> 

<1>/3< / "129 . تتتتاتلا 32 75آ2 طك / 500115325 /043531"-52 ><" عنتوان صغير">-1<16ع "#"<2عطط 33> 
<3250"/<2>/3. -2ع08531/50015125/065">-52 و1 ><" عنوان صغير">-16غ1ج "#"22عطط > 

<3>/3< / "3150 . 117023526635 /52>"03531/50015125 16 ><" عنوان صغير">-1<16ج "#"-2ع2ط 33> 
<3296"/<4>/83. 6111152 08531/50015125/3">-52 100 ><" عنوان صغير">-1516ج "#"22عطط > 
<5>/3</" 156 . 6111125 /03531/20015125">-52 ><" عنوان صغير">-1<16ع "#"<2عطط 33> 

> / 017<>/ 015< 


<0157 /><"5_52320017"-13535ه 01> 
< 01 /> 
<2322ء 3 / ><" 3 ن . 02 201121217/701513ه "متج 2 5 "2125 3735 زو لجاع "ماع 3105م 53> 
<2325ن 5 / ><" 35 . 231215 5 / 6291261 "ج52 "335352125 /طعزع ع "6106-7 23155 35> 
<01ه0ط/ > 
<لسغط/ > 


دزر يم 


نه شر تن لذن 


كن ك0 ك) ذكن كن كن كن 


0 /00967 :عا اانا 


أع .هام جاعع] ©1010 :اأهمع 2 00967 :2 5اا8 ١/0‏ 


١5ا/‎ 


كما نلاحظ الصورة : من سطر7-6 ربط الصفحة بملفات الووح والجي كويري بالإضافة للأسطر ."١-7٠١‏ من سطر ١١‏ إلى سطر ١8‏ خاص بالصور 
الكبيرة للسلايدشو. من سطر ٠١‏ إلى 7١‏ خاص بالصور الرمزية الصغيرة . سطر ١8‏ خاص بالظل الذي تحت السلايدشو. 


القوالب الجاهزة 


يمكن لأي مصمم مواقع الكترونية الأن أن يستفيد من عالم الإنترنت وعالم تصميم المواقع الالكترونية فقد سهلت الكثير من المهام امام مصممي المواقع 
الالكترونية نظرا للانفتاح الكبير بين المبرمجين والمصممين في عالم الانترنت وتبادل الخبرات والتجارب في مجال تصاميم المواقع في هذا الجزء 
سنتعرف على أشياء جميلة ومساعدة سهلت لكثير ممن لا يجدون في أنفسهم الإبداع في شكل المواقع الالكترونية أن يستفيدوا منها وهي القوالب 
الجاهزة للمواقع الالكترونية . 

ماهي القوالب الجاهزة: 

عبارة عن تصاميم ويب جاهزة من حيث الهيكل الخارجي والتصميم الشكلي للمواقع مصممة بأحدث التقنيات المستخدمة في تصميم المواقع مثل ( 655 


501121 414ل * 70111115 - 1113113 -111311 -09553) - ). ويمكن لأي متخصص في عالم الويب ان يستفيد منها ويقوم بتعديل ما 
يلزم وتركيب قاعدة البيانات الخاصة بالموقع. 


كثير من القوالب تكون مجانية ولكنها في الغالب تحوي حقوق للمصمم سواء عدم التجارة بالقالب او حذف رابط المصمم او الشركة المصممة ولكن 
هناك ما هو مفتوح ايضا وبإمكانك عمل ما تريد. في المقابل ايضا هناك قوالب مدفوعة أي عليك القيام بشرائها لتستطيع التعديل عليها كما تريد ونقل 
الحقوق للملكية لك كمصمم. 


يمكن إيجاد القوالب بالبحث عنها في محرك البحث جوجل ب (12145م22©] 77615166 ©©:51). صور لبعض القوالب الجاهزة : 


ومتموعن دبعلا ا 0 ومأافوع نا دبرا 


ومأامجع7 دباعلا 


5101 |1١16 


١/08 || 2: 00967 0 71100‏ 
لامي أعم.وأم داءعع]©0)م1[ :اتهمع ‏ 772755202 2:00967 8|118 0ن 


58 


0001135 و8160 105 501115 5أععزممم 5/105 علنناكيةا 37 | 0 1 


111لا 518115 للة 11 


ممصم 1إزع/1الفكقع كلع 


00 10 ]3م01 


15 قل مها 
© كعاناماا اأداا ١‏ 9ه 


ع تتليانا 


اماد عنا 6 “01 5 مكاعم 


5 3 ع3 111000 60 0131103 ,5أنان مأننااء امك 0106ل مماء 5زم301 علنأعاءء 5ممء 
- راتت خقيية 0 2اصمغط»ه لمأ /بروتك /بروتك /كا 11/1 /ممخلى اعلا معمع لاوعونا 


20000 0 009677 :|| 1/08 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


2111 عى 55 ) عى 101[1:167 عخة 1]1111311 ع 21ل)5 017 


711000 #0 009677 :6 || 08/ا 
امه أعم.وأم داءعع]©0)مز :اتدمع ‏ 772755202 2:00967 8|118 0لا 


تطبيق عام حول 2117 ع  ).55‏ .1111/11 ع .115501 


سيكون هذا التطبيق عبارة عن خلاصة ما تم تعلمه في الفصول السابقة والتعرف على اضافات أخرى ودائما قبل البدء بالمشروع لابد من تحديد ما هو 
المطلوب منا وماذا نريد بالضبط ونقصد بهذا علميا قبل الشروع بالعمل لابد من جود تحليل عام لما نريد عمله ونحدد كيف سيكون الموقع الالكتروني 
وماذا يتطلب وماهي الخطوات الأولية وهكذا حتى يتم العمل بشكل واضح ودون الوقوع في أخطأ او التعديلات المتكررة وضوح الفكرة والعمل أهم عامل 
في بناء المواقع الالكترونية. 


فكرة عامة حول التطبيق 


سنقوم بإنشاء موقع إلكتروني لرواد التكنولوجيا وللخدمات التي تقدمها »موقع لمؤسسة متخصصة في إنشاء المواقع الالكتروني وسيحوي الموقع على 
خدمات الموقع وأقسام الخدمات. لذا سنقوم بعمل جدول متطلبات ومحتويات الموقع. 


المحتوى ملاحظات 
يتم تصميم * صور رئيسية لعارض الصور (511065120178) حسب مقاسات التطبيق 
8 5 5 المستخدم 
يتكون الموقع من ” أقسام للموقع 
(قسم المواقع والاستضافة - قسم تصميم جرافيكس - 2 


قسم الصيانة والشبكات ) 00 
جدول خاص بكل قسم في قاعدة البيانات 


تتكون القائمة من الاتي ( الرئيسية - خدماتنا - من 


أعمالنا - من نحن اتصل بنا ) 


قاعدة البيانات 
الجداول ملاحظات 
جدول للقائمة ونسميه 12611 
جدول الأخبار 171195 


جدول الخدمات 07ر56 


جدول مدير الموقع :)2 


ا 0 00967 :عا |8 0لا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.هأم جاعع] ©1010 :اأهمع 2 00967 :2 5اا8 ١/0‏ 


الصفحة الرئيسية مطم.عدء لم1 


سيتم تسمية الصفحتين لاحقا بالإضافة إلى تضمين الصفحتين بواسطة 
صفحتين لترويسة الموقع والجزء السفلي من الموقع ()122100 وهذا هو السبب لعمل الصفحتين كي لا نقوم بتكرار التصميم في 
كل صفحة ويتم الاستدعاء فقط بالدالة 110016 وكيف يسهل التعديل مستقبلا. 


صفحات أخرى حسب الاحتياج 

مجلد يحوي صفحات مدير الموقع ويحوي كلا من : 
صفحات إدارة الأقسام وتعديلها. 

صفحات مدير الموقع صفحات إدارة القائمة وتعديلها. 

صفحات إدارة المدراء وتعديله. 


١/1081: 009677 0 0000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


المرحلة الأولى (التصميم) 


نقوم بعمل مجلد للتطبيق وتسميه 1004م ضمن المجلد العام 777868. 


نقوم بعمل ؛ مجلدات بداية ضمن المجلد الخاص بالمشروع وهن ( 2018 - 5عع12128 - 055) حيث أن 13ج مجلد صفحات مدير الموقع و 
5 للصورة المستخدمة في تصميم الموقع و ووح لملفات أو ملف السي اس اس وسيكون شكل المجلد 1004م كما في الصورة: 


52 عم 50011 غ03 عممةلا 
عنام عام 754٠م‏ االا/ط بم متصلة لك | 
؟علاه؟ عاتع  ٠:75(‏ م لالالرق/15” كى لل 
ععلاه) عاط +خ:7٠‏ م 7١15/٠‏ كع وما لكى 


نقوم بعمل صفحة رئيسية «طام.1206 ضمن المجلد 4ع ءز0::م . وصفحة و.»5)91 ضمن مجلد و. 
نقوم بتجهيز خلفية مقاس (الطول -١5٠١‏ العرض )١ 1٠٠١‏ ونضعها في مجلد وع121286. 

نقوم بعمل الخلفية للصفحة «رام.:©12016 وسيكون الكود كما في الصورة: 

صفحة «رطام.ءد1201 : 


<"050 . 153101221 1311-23115ن ع3 / 8212 / 1 دختتعاطعة /18 /روعده . 13مآ. 7676م / / : وععط" "111 / / 10231 ت1قتطة1 0. 1 :711111 219 / /13]/ /-" :21181 لسعط 5م2022 !> 
< "لطع / 1999 / وعد ه . 183. م7 / / : عط" -25 لد لمسغط>» 

<0هعط> 

</ "2-8 ط تع وقطاقطه : اطاط رع عدعح "2ن ع ع نمه "0025625-1156"-17ناوه لم200 وخاعده 

<210526625>/21516 77و15مضطءع1 |[ الرواد لتكتولوجيا المعلومات<2521516> 

</ "قوق /عجامج "عم مزع "ععع زوع 1ئز 5 "5261-7 "وقح . 316 “رقو "عط 111> 

حلدعط / > 

<20017ط> 


<تاق مط > 
<لمسعط > 


صفحة و.»516 : 


:"52-8نا" عع وعم قطء 


4م20 
: #50 : 10م -0 7نامع وعاء قط 
: 1120-1713 م2دوعاء 3ط 
( : (329. وط/دء122290 / . . ) 121 


قمنا بإدراج خلفية جاهزة باسم عومز.عط سيكون شكل الصفحة كما في الصورة : 


١/0811: 009677 0 550000‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


2 غات ذا 2 © « + # 5ه /كعزمءمل/ادهطاهها 5] | © جا ل 


نقوم بتقسيم الصفحة الرئيسية إلى عدة ديفات أو حسب الحاجة ونقوم بتحديد اطرافها وعمل لون مؤقت والديفات كالتالي : 
الديف العام والذي سيحوي جميع الديفات الأخرى وسنسميه «:2281 والكلاس الخاص به في ملف 5916.055 بنفس الاسم. 
ديف رأس الموقع وسيحوي الشعار واسمه 12061 والكلاس الخاص به بنفس الاسم ايضا. 

ديف القائمة وسيكون 721 والكلاس ايضا بنفس الاسم. 

ديف الخاص بالسلايد شو وسنسميه 51106 أو حسب التطبيق الذي سنضيفه من سلايدشو جاهز. 

ديف خاص بمحتوى الموقع ])درء]2م». 

ديف بالجزء السفلي للموقع «ددهغ501. 

ديف خاص بالفوتير أو تذييل الموقع «ع15006 وسيكون خارج الديف العام. 


بعد القيام بهذا الخطوات سيكون شكل الكود في 1م.:1306 كما في الصورة: 


1100 0 009677 :|| 1/08 
واكاك أ©م.هأمحاءة]©م)مز :تدمع 2 772755202 2:00967 08/18 


١ا/‎ 


<"050 . 01121 1-1232151531 312731 / 1012 / 7011ط طعة / 11 / 010 . 173. 66م / / : وإاع ط" "511 / / 123251510231 0. 1 -37131111 281 / /113/ / -" 281:1 لسعط 2022285 !> 
<"لتتططعد / 1999 /روعده . 173. لمالا / / : مع عط" >-25 تمعد لتسغط>» 

<0هعط> 

</ "2-8 خط تع 25 قط :20701 /لععدعع ">5 562 2م "625-1106 55-6111-7002 25 1653 

<2152665>/:212516 17و10 مضطءع1 |[ الرواد لتكتولوجِيا المعلومات<61516> 

</ "ققتن /عجاعع "ته لزع "261>"5511652666 "55ج . 55116 رقق5ن "2262-7 1151> 

حفدعط /> 

<خ01ه0ط> 

<-- هلز بيداية الديف العام د !»> 


>01 1355 "21212"< 


مر يم نن ظر ين 


ه 


<--هة داية ترويسة الموقع--!> 


<037/>رأس الموقع<"<عمهعط"-618353 01> 


<--هتنا يداية القائمة--!> 
<017/> هتا القائمة<"1ا2ع6"-1355- 03> 


وعد ه43 ففاية اتقاكوة --!>» 


<-- 10 
<0417/>هتا سلايد شو<"51106"-1355ه- 01> 
<--5201 511046 20ظ-- !> 

<-- يداية محتوى الموقع --!»> 
<017/>محتوى الموقع<"226ع26م"-1255ه 03> 


<-- تهاية محتوى الموقع --!> 


<--يداية الفوتير--!» 
<0417/>تذييل الموقع<"2ع20066"-13255ه 01> 


ج«حدنيهاية. القوقيوو --ت9!ي 
<03 /> 

<--نهاية الديف العام--!> 
<تاق هط / > 


حلسعط/> 


وسيكون الكود في ملف وو5916.0 كما في الصورة : 


للعقع .5 
: عطوتاعط 
: 710 
:31120 12:0مي2هد 


اع تاءة 
:0 50114 #2577 :عع عمط 
:ا عطوذدعط 
م0 : طع 710 
1 012:0 282 
)1 
اللمداية 
:م1 #522 551134 :ععلعمط 
: عطوتاعط 
م0 : طع 710 
:1150 12:0يوع هدس 


264 
:2 50114 #7775 :ععلعمط 
2 : عطوتاعط 
م : طع 1710 
( :220 12:0ني2هده 


ل ة 
:م1 1134ه50 #5515 :عع عمط 
: عطو1اعط 
0 : طع 710 
( :3112507 12:0وعهمس 


م0 
:0 55114 #758 عع لعمط 
: عاطواعط 
نعم 960 : طع 110 
012:0 2م 


ا 0 /00967 :عا اا8 اا 
أ جا. 0 أم حاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


وستكومن النتيجة كالتالي : 


- نف 15 7 © خخ« ل نك مه باعع زهىم/أدهطاةءه! 5 ٠‏ © 4 
رأس الموقع 
هنآ القائمة 

عو 

محتوى الموقع 


َل الموق 


نقوم بالعمل على ترويسة الموقع 162016 ونبدأ بتصميم شعار الموقع وسيكون المقاس (الطول ١١١‏ بكسل والعرض 74 بكسل) أو حسب الرغبة 
ونضعها في مجلد الصور. سنقوم بعمل كلاس للصورة أو الشعار 0ع10ع1321. لكي نستطيع التحكم بالشعار. وسيكون الكود في «طا[.::1206 كالتالي: 


>07 061255-52 2082"< 
110 52-7" 17082665 / 10900 .5220" 13255-10160607” 
> / 01< 


وتم اضافة خاصية (11600102) وتم تحديد القيمة 701 للديف 1862061 كي تكون الصورة او الشعار في الجهة اليمنى. وسيكون الكود في ووح.»5691 
كما في الصورة: 


11221: 1 

م1 50114 422515 : عع لعمط 
3150 : 25و 1ه526 

6052 : طع 110 

31150 12:0نيو2 285 


أع .0 آم حاعع]. الا لانانانا 


وسيكون شكل الموقع كما في الصورة : 


0 نف 5 7 © خخ < # د لاععزهمل/أووطاها  ]5‏ © جه » 


ننتقل الان للقائمة وكتابة العناصر فيها وعمل كلاس خاص بها وبعناصر القائمة بكاملها وسيكون الكود في 1[7م.<:12016 كما في الصورة : 


<--هتا يداية القائمة--!»> 

<" نالطع" ->1355 03> 

>111< 

<3<>/11 /> الرئيسية<"222. 2262-1320 131<>3> 

<8<>/11 />خحدماتتاح”"4"-2قغخط 11<>8> 
<3<>/11/>من أعمالناح<"#4"-2عطط 11<>3> 
<3<>/11 />من تحنت<"4"-2عطط 11<>3> 
<3<>/11/> اتصل يتاح<"#"-2ع2ط 11<>2> 

<111/> 
<03 > 
تحدمهتا تهاية انلقائمة--!> 


قمر فم 
- 65 ها 


2 


دز يم ين ظر هن 


هه 


لك أكن كن كن أكن ذكن كن كن كن 


ل 


وسيكون الكود في ملف الووح.»591 كما في الصورة : 


: 41355-55716 111 12062211. 
اه اعد" 
: 502 -201210131121 
:011 218201122-20155 
:21035 
5 : 212120312-219025 


66 م 


1-1 


فم از 


) 
134 1خ اناقاعلة. 
: 1:6 122 
:5 : 25و 5261 
م0 :م3 :م0 : 2300329 
:#0 :عم1هم0» 
0 *بتخام1 عنص3 عتم1 عنم1 :مه طد-عيروع 
: 71062 


م ماه 


هم يم زر 


34 11 111 قاطع22. 
: #5 :عملاه0» 
2025-6102 
6 :565-2236102 
4 0 2ام1 جام1 :0م200 2د-عيروعح 
6 : 02 56215-06023651 
م0 :م3 م0 : 252003529 
:3 :م1 جام1 :مه طد-عيروع 
: 2025-5126 
1 


ظر ضر ص كن صن عن 
ت نزم ديم ز) ظر ا ١ت‏ [ 


من صن كن (ر 


352264 131 111 220562,287: 3 11 111 206211. 
عام0 :م3 :م0 : 3003م 
: 261025 
2م00 م8 م0 : 2-25201115ع206ه20 
:#55 :12م 
:20 نم1 +ام1 :6م5220 -ععدعج 
] 


0 00967 :عا اا8 0لا 
أعجا.ه أمحاعع]©0]طأ :اأهماع 2 00967 :2 اا 08لا 


أ (جا. 0 أم جاعع]. /انانانا نالا 


وستكون شكل القائمة كما في الصورة التالية : 


2 ات 9 جا اع هاب بع زه1م/أدمطاوها 5 ' "© جه » 
7 
0 اللا 2 0 1 
27 
14224 ه00 
ار ئيسية تست يساسا من اعمالتا من نحن اتصل ينا 
هنا سالايد شو 
محتوى الموقع 
تذييل الموقع 


سنقوم بإضافة كودين " اكواد جديدة للكلاس الخاص بالقائمة وهما كما في الصورة : 


م1 4878787 005560 : 0ج -2 20206 
م1 4878787 0055604: امع 5 مط-2 206 مط 
722 : 50 -2012203121 

م40 : ع طوادعظ 

1م960 : طع 110 


كما نلاحظ تم حذف ال701:0»1 السابق وتم اضافة ال:ع701:0 لأعلى وأسفل كما في السطرين ؛ ؟ و5؟ وجذف ايضا الكود السابق ع221312م واضافة 
0ض من أعلى كما نلاحظ الكود أعلاه » وبعد الانتهاء من الترويسة وما فيها من الشعار وايضا القائمة نقوم بحذف البوردر 70120167 الخاص 
بال16206 من ملف ووح والموجود في سطر ١١‏ وسيكون شكل الموقع كما في الصورة : 


4 الث 
للكت 20 1 5 
1 هل 
الرئيسية خدماتتا من أعمالت هن تَحَنْ مضل بن 
هنا لايد تنو 
محتوى الموقع 
تتييل الموقع 


نقوم بتركيب سلايد شو وهو موجود لدي مسبقا وهو كما في الصورة: 


حبا بكم في رق الالكترونية 
ير 0 جه الك 17 


أع .0 آم حاعع]. /الالانالانا 


١/8 


من خلال الصوراة اعلا ستتقوم بعل البنلاياش و كعن الموقع الخاتسن يكا تقؤم يحتف لديف الخلض :811350 ولكر اتقؤم ينقل: التطبيق يقاناله تحرص 
على نقل الملفات الخاصة به وملفاته كما في الصورة : 


© )| فم د ععلام؟ معلا مس8 > طاغابيا عرقطك > بموعطناد 
512 عميا1 0011م عقن 9 عدولا 
تعلاممعاع ‏ #انر*م 15/1/77 غدل أل 
10 ع1 1١:55‏ ص 7١15/١5/7‏ عمنوم لال 
18 ...00 ااا لا عمصمعطع ٠١:77‏ ص 7١15/١1‏ عع ع صا_ع حصمما 6 
28 ...80 ]نا عصمموطع  ٠١:6١‏ ص /اا/ط 7١15/١‏ »عم © 


سنقوم بنقل جميع الملفات أعلاه إلى مجلد )77060 باستثناء 1006 فقط سنقوم بنسخ الكود الذي نريده من داخله وسيكون شكل المجلد بعد النقل كما 


م ععتزورم طعروع5 ||| ح> | + ١‏ غعرزمم < نععع <١‏ مصويعد ١‏ (ن)عاوزل اهءعما ١‏ ععشرممك ١م‏ 77 

© مد ؟علاه؟ بمعلذا ص8 > طاغانها عرقطة > نووعطنا ماع لوساعمآ > ععامةو:0 
ع5 عمر1 لمم م23 . عمولز ‏ + عم اترويوع جلو 

عام عاط ٠:3‏ م /ااطء /5 71 متصةة لل ممغاءء0 !91 

ع1010ع271 ٠6:76‏ م لااط١٠/5‏ 71 دى للا 05م هامييه0 إ[ ا 

1010 ع1 ٠:51‏ م /الاط١٠‏ /5 71 وك أل كعء واه أمععع8 251 

ءاه عاع ‏ 51:م.م الاق 15+ تعمتومع لال 

؟ع1010عا 21‏ ١١٠١م‏ لالابطء٠‏ /5 71 ععوقص] لال كع نوطنا 2 

118 ...20 11/11 لا عصممعطع  7١:7‏ ص لاا/طء١ 7١15/‏ وما عدوم © كمع انا 00 

268 خملع5 ملام القطء م لالالرطء 715 كيل 1ك عأكناة/اا لم 


سنقوم بفتح ملف 1006.031 لنسخ الكود منه إلى الصفحة «[ام.10016 كما في الصورة : 


عام ايم 
| 


201120-11 وع1 5153216-53 20017> 


وخ + ++ 23 ا 
2 3 :10 4 


0 /00967 :ع اا ١/08‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


أع جا. 0 أم جاعع]. /انانانا نالا 


لكلا 


تم نسخ الكود أعلاه وايضا السكربتات المرتبطة واللينكات للملفات الخارجية وهي المهمة. وسيتم النسخ إلى داخل ال ©5110 كما في الصورة : 


<"ع1355>"5110ه ”01> 
<”0461-0253312261 10-1701513 03> 
<111><" 108065ة_05" 13535 01> 
<051_0"/<>/11"-10 "نبرحيا يكم قي دورة المواقع الالكتروتية"-61516 "عنوان 1"->215 "610170.320 22175311615 / 1702065 / 02531 "3520-7 1200 >< 11> 
<51_1"/<>/11لاه"-10 "عتوان 2"-51516 "عنتوان 2"-315 "3590. 065626 / 02531/12026065 "52-2 وهنة>< 13> 
<51_2"/<>/11:ه"->10 "عنوان 3"-51516 "عنوان 3"-3165 "3596. 21702326635 / 1512665 /08531"-52 وذ >< 11> 
<151_3"/<>/11ه"->10 "عتوان 4"-61516 "عنوان 4">-2315 "3290. 12665/36111215 /08581"-352 و1 ><11> 
<051_4"/<>/11"->10 "عتوان 5"-61516 "عتوان 5"-215 "356. 111123 /0331/31102665 "522 ومن >< 11> 
<031 /><111/ > 
<11255"<>0157ناط_5" 1355 01> 
<3 />1< / ”3129 . للتناقلاك 31261 175 2ك / 500115125 /03531"-52 1700><" عنوان صغير"-12516ج "#"<2ع2ط > 
<350"/<2>/3. +دء5ع0 /522"03531/50015125 1516 ><" عنوان صغير">-12<16ج "#"-2عطط > 


<ة/>3</ "31290 . 21023596635 / 50015125 /03531">-52 17500><" عنوان صغير">-12516ج "#"22عطط > 3 
<2 />4</"و35 . 6111715 03531/50015125/3"-52 1519 ><" عنتوان صغير"-12516ج "#"-<2ع2ط 2 > | وين 
<5>/3</" 3290 . 1125ناء /03531/00153125"-352 يوندذ><" عنوان صغير"-16غ12ج "4"<ي2ع2ط ح> ١|‏ فق 
<01 / ><17ل / > | كلق 

<017 /><"220017ك_5"-13255ه 01> 50 

51 >/ 01< 

<017 / > | وين 

53 > ! -- 8520 511046 522017--< 


وايضا قمنا بنسخ اللينكات والسكربتات الخاصة بالسلايشو في المكان الصحيح ما بين كود ال20ع]1 قمنا بنسخ الرابط لملف الجي كويري فقط 
والسكربتات الأخرى في ال7003 كما في الصورتين: 


<20هع2> 
</ "2-8 ع ناتعهةوطقطك ‏ : للتغط لع يمع "عع ومع صمت "م1175 طع ع ده "57-2 1ناوه عط تمه 
<21052665>/:1516 7و105مضطءع1 |[ الرواد لتكتونوجيا المعلومات<21516> 
</ "5ق /عءزهءج "> 6©6نزع "261>"55371652666 "55ج . 56116 / 55ت "-2262 1121> 
</ "قتع . 221/3112 دونه "ع #قطط "ققت /لخؤاوع "عم وزع "ععع لوه 1ززء 2561-5 1151> 
< ماع ت / ><" 5 و . بألا 1اك 3 012217ه "ع2 5 "2156 735ق زجاوح "عتم ماع 5وروعء ع > 
<0هع 2 /ل> 


<--نهاية الديف العام--!> 

<2152ع 3 / ><" 3 ن . 21261/70135130 "52-2 "3732523156 و لطاع ع 1006-7 2156 35> 
<طنعء5 /><"3 3 . 235 261/5 ذوده "ع2 5 "231256 3735 زذ لعجزعء "من 21256 5 > 

<تنا0هط/ > 

<لطغط/ > 


0 /00967 :ع اا ١/08‏ 
أع اه أم حاعع]0©1]مز :اتهممع 2 00967 :2 ااا كلا 


أع جا. 0 أم حاعع]. /الانانا نالا 


وسيكون شكل التطبيق بعد نقله كما في الصورة: 


- نف 1 7 © « ل 2ه مه #ملامءع 0ص عع زهئم/أومطاوءه| 5] ١‏ 26 ٠ش‏ 


نقوم بإزالة الخطوط البيضاء من الديف 5110 بحذف ال::ع701:0 من ملف الووح وسيكون شكل الموقع كما في الصورة : 


0 نف 1 7 © خا له #ه + #مامءء لماع زمرم/أوهطاةها 5 © 3 


سنقوم بعمل إضافات جديدة على الموقع وهي عمل خلفية بيضاء شفافة للديف «رؤومم والخلفية نقوم بعملها في الفوتوشوب أو من أي مكان وحسب 
الرغبة وعمل ظل للديف العام . أما الصورة فهي كما نشاهد : 


8 2 ”م 80 ممما 


أع .0 آم حاعع]. /الالانانانا 


كما في الصورة أعلاه نقوم بحفظ الصورة ونسميها :م.7282 ونقوم بإضافة الكود في ووح.5)916 للديف «رؤججم الخاص بالخلفية وسيكون الكود كما 
في الصورة : 


املع 35 
: أطو1ة1عظ 
:م960 : طع 10 
15 1252012:0 
: (229. 15132625/2962 / . . ) 1121 : ©20-3171296ناه2وعلا 3ط 
- : مرهخ -21820122 


تم اضافة الكود في سطر ١‏ وسيكون شكل الموقع كما في الصورة: 


مرحبا بكم في دورة المواقع الالكترونية 


نقوم بعمل ضل للديف , هناك بعض المواقع المساعدة تصميم وان شاء الاكواد بشكل يدي كما في الموقع : 
(51:20033-::1702/قطام». 21 مطادى . 1535735//: مخخط) 


وهو كما في الصورة ادناه من خلال الازرار في اليسار نتحكم بالظل للديف على اليمين وينتج لك الكود الذي يقوم بذلك وننسخ الكود الى داخل الديف 
(الكلاس الخاص به): 


© .0 أم حاعع]. /الانانا نالا 


2 هادف 5< 2 © « + 4 د 


ل الي 7 اعمس عر |" لارام 5 8016 
»م الأومع ا الهأممعارونا 
بيد ل(لأومعا ادعنامع/ا 

ع1 لإم0 © 
*امم 2205 ]ناا 


:م28 »م7 )م 3- :رامق هجاع-«وط اناطع بود 
(53)0,0,0,0.75و 
(2)0,0,0,0.75 مو )م1 »«م28 »م7 ام 3- :02-007-30130010 - 


(053)0,0,0,0-75 )م1 “م28 /ام7 “ام 3- :/130014ى-)زه 5 “ام 230105 50830 


| | مام /ل60 530 


80« 0010] 


0010 


حنطيا عمالأنا0. 


وسيكو الكود كما في الصورة : 


2150 : عطو ماعط 

2م960 : 71062 

31150 12:0ميع2 مق 

(229. 1712625/292 / . . ) 1111 : 0-1218 7نامع وعاء 3ط 

75 - : مج -21220122 

(0,0,0,0.75) قطوع2 عنم1 :م28 عتم7 +دم3- :52530017 -12ه315-50ع1طع16- 
(0,0,0,0.75) 8طو2 :م1 :م28 م7 :م3 :7202-5201-5230017- 
(0,0,0,0.75) قطنو :م1 :م28 عدم7 :م3 :525001-ءئتدمط 


وسيكون شكل الموقع كما في الصورة: 


َ ف 5 7 © خا ون عه أب يه زم ]مد مطاهع ها 6 ى 


© .0 آم حاعع]. الا لانالانا 


1١/1 


ننتقل للديف 6در»مم» والخاص بالمحتوى ٠‏ من خلال القوالب التي نستفيد منها في اجزاء المواقع لدينا قالب مميز سنستفيد من بعض أجزاءه وهو كما 
في الصورة : 


0 للا 01 اللا 


ناا 53903 ععماول غعع30! انا أمنلاعمة لملمذاناء لاطتم لإاممناومم مهال لم5 باناء وماعدام 301 )عنأفاعءكممء بأعجم3 غأد )مامل نادم جمعرم ا 
00 قوع ناء مأناوااة أن ادأه 5تازمطه! ؛أمأعدناد /عم/م3202اأنا 20100 أعاعناء 00أ205 5أنان ,دامعلا اقلم 30 لمع أوايلا ألا غأدمغأنام أهع 


601501314 
/لاظ/لاك ذا لالادط| /081 | /لاطالاكد ذا لالادط| /0821 | /لاظك/لاد ذا الانادط| /ل1 0 | /لاظا/لاك ذا لالادط| /081 | /لاط لاك ذا لالاذطض| /0821 ا 
بأ306 غ51 )مال تناوم! لمع)ما أ 51 /واول تاناكما 01210 ا أ 51 )مال تاناكما 0ع01 ا بأ3006 غ51 )مال تاناوم! لمعما بأ306 غ51 )مامل تضناكما لمعم ا 
0ل لع5 بالا وواء دام 301 الاأعاعءدلممء 0ل لع بأذاء وماء دام 301 اللأعاعء5ممء ل لع5 باذاء وماءأدام301 الاأعاعءوممء 0 لع5 بالاء وماء أدام301 اللأعاعءكعممء 0 له5 باذاء وماء أوام301 الاأعاععدمم 
أنا ألنالألاعما )ممدمع؟ 00نم دناء نا نال ألاعما ,ممدمع؟ 0ممدناع أن ألنال العم )ممع لملمدنااء أنا غأنالأ0اعما )مملمع؟ ل0مرمدناء أنا أنالألاعما ,ومممعغ 00لمدنائعء 
3103 3903 ع,مامل اع عرم6دا 3103 039013 عأمامل اء عرمطقا 23 23903 عرمامل اع عرمطقا 313 23903 عرمامل اع عرمطقا 3 253903 عرماول اع عرممقا 


سنأخذ الجزء الأول ((170 77717 '7771141) : والطريقة هي أن نقوم بنقل الديف كامل لهذه الجزئية وهي كما في الصورة: 


<"2ذ1همس"-1355ه 01> 
<"مجةع "1355 01> 
<"م25-205ع6 25م" 


م2021 03370 0 11 2032 2ع نا 02562 ,33068 51 040102 511م1 م2 
حاتت وناءودء يا 0891-1 إئز )210 205 1115© ,10 نقصستم 20 ستدء 151 حنا 


<"طناه2و_ومدع6ىع5"-61855 _03157> 


من خلاص الصفحة الخاصة بالقالب نقوم بنسخ المضلل عليه ونضعه في الديف )همح للصفحة مرطام.عع س1 الخاصة بعملنا كما في الصورة: 


<-- يبداية محتوى الموقع --!»> اك 
<"6 2ع 6 نمه "-1355 01> كك 
<"+امط- ومع "1355-7 03> 69 
<22/>ماتقوم يه رواد التكتولوجيا<22> 70 
<عط> 1 
<م> 


موقع إلكتروتي متخصص قي تكتولوجِيا المعلومات ويقدم خدمة تصميم واستضاقة المواقع الالكتروتية والتسويق الالكتروتي 
مواقع : رسمية - إخبارية - تجارية - تعليعية -قواعد بيياتات 
إعلاتات ممولة : قيص يوك - جوحجِل - تشرات الكتروتية رسمية 
<«م/> 
< 01 /> 
< 01 /> 


<-- نهاية محتوى الموقع --!» 


لاحظ الكلاس الموجود في سطر 55 الخاص بالنصوص إما أن نقوم بتتبع وجود الكلاس في ملفات الووح الخاصة بالقالب ونقوم بنقله لملف 
الوو».5716 الخاص بنا أو نقوم بنقل الملف إلى المجلد وو© ونعدل مسار الرابط الخاص به. هنا نحن قمنا بحذف جميع الاكواد الخاص به ماعد الكلاس 
الذي نحتاجه ونقلناه مع المجلد كما في الصورة : 


ا 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجاءه أمحاعع]©0]مز :اتهممع 2 00967 :2 عااا8 ولا 


*--61212 2012212 -- # / 
14 #امط- مهت . 
:62 :5615-3110 
م :2 1ق 
6 :2025-5126 
: '11132وع2عناع2_دقطع '2‏ : نا خسة 2026-2 
:2 :22-205501 1151201 


1 
ِ 
4 
5 
3 


:2 501134 م1 :تلمع مط- عع عمط 
6 :202062-20 
:0 :12مي2همه 
:5 :7106 
:1ا 1211326-21 :041525213137 
:- :118120122-5052 
:1218203122-5205501 
15 :1181012-21 
2 :2182012-16 

1 

ا *مط- دمع . 
:62 :56215-31301231 
2 :22-52055011 50182201 

1 

4 >امط-م20 . 
222 :خغممامة 
6 . 0 :2025-5126 
:له . 1 :11226-56190285 
:65 :106 
2 0 :252012 


والطريقة الأسهل هي نقل الكود السابق إلى الووح.56916 . وسيكون شكل الموقع بعد تحويل النص إلى العربي كما في الصورة : 


نت 5 7 © خخ ع دا مامعع 0م اباءء زه:م/أدهطاةءه| 5 | © ج -» 


5 # ل4 1 


موقع إلكتروتي متخصص في تكنولوجياً المعاومات ويتتم خدهة تصمي 
تجارية ‏ تطيمية -قواعد بيانات إعلانات ب 


ا 0 00967 :5 اا08اا 
أع طا.0 آم حاععغ. انا نالا لاا 


أعاءهأم حاعع] ©1010 :اهماع 2 967 :2 ع اا8 0لا 


١و‎ 


نقوم بإضافة أخرى أيضا وهي للأقسام أو الخدمات الثلاث التي تقدمها رواد التكنولوجيا وسنستفيد أيضا من أحد القوالب وهي الجزء الموجود في 
الصورة : 


510لا[ شاناءاناع/ا للزمه2 2 لانلاكطلا الجاعه ص لدعلا زنا ا ناوع لطا دنا عمس عن[ 


سنقوم بنسخ الكود الخاص بالتطبيق أعلاه مع توابعه من ملفات وو والكود الخاص به كما في الصورة : 


سنقوم بنسخ الأكواد أعلاه وننقلها للصفحة «رام.1206:2 الخاصة بنا تحت الديف الخاص ب(ما تقوم به رواد التكنولوجيا) كما في الصورة : 


0 0 /00967 :عا اا8 اا 
م ١‏ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


١ك‎ 


مواقع : رسمية - إخبيارية - تجارية - تعليمية -قواعد يياتات 
إعلاتات ممولة : قيص يوك - جوجِل - تشرات الكتروتية رسمية 
<«/> 
<3ن /> 
<-- لجرّء الثاني من المحتوى - 


<"210_5و"-1255ه 01> 
<201129>/522 ناعع2 002566 32062 512 00102 متناكم1 مع 0.آ<22> 
<"0210و"-1355ه 01> 
<"9031121”-13535ه 01> 
<2 / ><" 1701306-1213106 "-2 63151 "3890 . 108065/0121045-37064ة /طء 32-1 3710 ><"320 . 02105-37004 /205نقة رطء 1" -2عطظ > 
<01 /> 
<26006>/23 كتاعطمطع قطع<قط> 
<"ج_10عو"-13255ه 03> 
5 5خا2 26 2328© 914150106 . 2136238 ع3 6205 1112115 7011145235 12 .1312© 20131296 نا 025626 32062 5312 040102 4نا25 1 لمع02.آ2<1> 
<2/>. 1225ع 129ء15م2043 40102 761 5تناع 16 115 2026 0.2نقناك ‏ 2620262315 21311134 ,ناء 2 2م2ط 
<ة/>ع202 2620<" لسغط. 2115عع0"-2عغعط "صغط_10عو 2وط مط طتاط"-1355ه 8> 
<عتق /> 
< 01 /> 
<"210و"-1355ه 03> 
<"نا2ع0311"-1355ه 01> 
<2/><" 6-123206 110820 "-2 6151 "3129 . 0121045-17065 / 1518665 رطع" 52 1700 ><"3207 . 02105-37805 / 65 هذ /رطة"-2عطط 83> 
<01 /> 
<523/>نا 5م131 2215 قصطعط عن <قط> 
<"م_10عو"-1355ه 01> 
5 3 5ا 206 235 2415146 .2132623 36 6205 11105145 701115235 12 .6112 20131296 اناعع2 0256© 323065 512 00102 تتتاكم1ة ع2 مآ<م> 
<2/>. 512625 3412156129 040102 761 122115 5نا ا 20226 ا .لتقناي ‏ 2620262315 1332اك 211 ,تاء 2‏ 2م20 
<202©>/3 2620<" للتطا2ط. 0652115">-2ع0ط "8غط_ 921‏ 1و 7م60 طتاط"-13535ه 8> 
<01 /> 
<3ف0 /> 
<"213و-1355 2313و"-13255 017> 
<"ناعع9811"-1355ه 01> 
<2/><" 3206 - 61516-71708206 "3890 . 6 0231045-37 / 17126065 لطع" 52 1100 ><"350 . 23105-37005ن رقع وقتتذ /رطهء"<#عطط 82> 
<3ف /> 
<13_311550>/23ناقخطه”7 12زمع3<2ط> 


نقوم الان بربط الموقع الخاص بنا بملفات التنسيق سواء الووح والجي كويري ونقل الملفات او المجلدا[لمتطلبة والمجد المرتبط بهذا اسمه جاع 
وتم اضافته للمجلد الخاص التطبيق وفيه جميع الملفات وسنقوم بالتخلص من جميع الملفات ماعدا المرتبطة بالجزء الذي نريده وسنقوم بنسخ الروابط 
كما في الصورة التالية : 


<سس !»> 
</ "311">-013ه26 "ققت /لعجاوح "عع مزع "261-51163288 "5ق . 36116 /رققن رطع" د<2عطط 11> لتك | 5 0 
حفوعط/ > 1 

<0017ط> 


نلاحظ في سطر عشرة واين مساء الملف المطلوب ونحن مخيرين إما ان نقوم بنسخ الكلاسات التي تتحكم بالجزء الذي نسخناه ونضعه في ملف 
6.55 او ننقل المجلد كاملا كما في الصورة : 


< طعنن ١‏ غعزمم < بعصا <١‏ محمدير ١‏ (ن)عاوز0 اهعما ١‏ ععغرممكك ١‏ نادف © 


ععلاه؟ معلا مس8 > طاغايها عفد > بوووطنا ماع نساعمآ > ععامقو0 


- 


512 عمر1 750011 ع:03] عدولا عا رميوع جلو 
عام عا 1١:57‏ ص 7١15/١2/77‏ كى للا ممغاىء0 111 
عهاه؟ عاط /أ١:17‏ م ارا 1 جاننييا 77 05 اناده 0 1-5 


عععوام جمععع8 35 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم جحاععغ. انا لانالانا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


وسيكون شكل الموقع كما في الصورة: 


2 نف 5 2 © خا لج # ا مامءع 0م أءع زه:م/أومطاقه! 5] | © جو 


كك :اناا 02566 ) أعتددة )51 :00101آ تتتادم] تمعندم ]1 


دلنعقتطء ؟٠‏ ستوسط أخأتاء1 0 دع 1 )الآ عنانوء 1 وتاعسمط] عط 1 
50ل 1110 


نقوم بتعريب اللغة وتعديل ما يلزم من مقاسات الخطوط في العناوين والتفاصيل في ملف الووح.50916 ضمن مجلد التطبيق 761 وسيكون شكل الموقع 
بعد التعديل : 


27 ا تصميم وإستضافة مواقع إلكترونية قسم تصميم الجرافكس صيانة حاسوب وتركيب شبكات 


أع .0 آم حاعع]. الا لانانانا 


١84/4 


نقوم ايضا بتعديل الخلفية لكل صندوق والرابط السفلي من حيث الخط والنص وازالة الخط من تحت رابط (تفاصيل اكثر) وسيكون شكل الموقع كما في 
الصورة: 


الجرافكس قسم تصميم الجرافكس 
الجرافكس 


ونقوم ايضا بتعديل مقاس الطول للديف 001416 كما في الصورة : 


ا ة 
:2610215 
:71061 
(:31120 12:0يع2 همه 


سنقوم الان بإضافة كود جديد للخلفية العامة البرتقالية وهي ان نحدد هذه الخلفية ثابته على ان يتحرك الديف العام 23 والكود هو كما في الصورة 
في سطر ١‏ في ملف ووح.5)916 الاصل: 


م2 
: #80 : 102م-0 تاه 2د وعاع قط 
: 2011220-17 و5231 
: (29ز. وط/ردء122290 / . . ) 121 
220 : ا 2عتتطء 2011220-3553وعلء قط 


3 
5 


5 ل من 


ننتقل إلى ال7ع6001 ونقوم بداية بتصميم خلفية للجزء السفلي (600416) ونحدد مؤقتا مقاسات الطول ونضع الخلفية ونلغي ال:7010161 كما نضيف 
ايضا تحديد لزوايا الفوتير السفلية من حادة الى ملتوية كما في سطر 88 ونفس الكود للديف 232 في الصورة : 


06264 
: (226. 20052 /1203065 / . . ) 1121 : 0-1130 تتامعوعاء قط 
2 : طو1عط 
: عطو ماعط 
:71062 
:2 2012:0 هه 
:5 :523 0223 0503 : 202062-2301115 
1 


511100 0 009677 :|| 1/08 
لاد أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


وسيكون شكل الموقع كما في الصورة: 


تصميم واستضافة مواقع الكترونية تصاميم رواد التكنولوجيا قسم تصميم من ضمن خدمات رواد التكنولوجيا صيانة 
وتركيب انظمة ادارة محتوك تصميم الجرافكس قسم تصميم الحرافكس الحاسوب وتركيب الشيكات للمؤسسات 
واستضافة مواقع الكترونية وتركيب انظمة قسم تصميم الجرافكس قسم تصميم والمراكز بمختلف توجهاتها من ضمن 
ادارة محتوى تصميم واستضافة مواقع العحرافكس قسم تصميم الحرافكس خدمات رواذ التكنولوجيا 

قسم تصميم الجرافكس قسم تصميم 


ننشئ ثلاثة ديفات داخل الفوتير لكلا من (آخر الأخبار - زوار الموقع - روابط التواصل ) وقبل البدء بإنشائها نحدد ثلاثة كلاسات ايضا بنفس الاسماء 
للديفات التي سنقوم بعملها وهي (كلاس 122575 للأخبار - 715160135 لزوار الموقع - 00131 للروابط ) وستكون كما في الكود التالي : 
(2654. 


106120254 


1 


وستكون في صفحة م.1206 كما في الصورة : 


<"2ع280086"-1355ه 01> 
<0419/>هنا آخر الأخبار<"22735"-1255ج 03> 
<017/> روايط التواصل<"11215"->13535ه 0157> 


<01/>زوار الموقع<"715180235"-1355ه 0137> 


أع طا.0 أم حاععغ. /نانانا نالا 


نقوم بعمل خصائص الكلاس 226185 والخاص بالديف 226175 وهي كما في الصورة : 


4 26175 . 
:171062 
:5 24999 501134 :عل عمط 
3232 5212 323 : 12ني2 قت 
32352 323 3032 : 2-23203115ع2020 
: 458616156 : 10م 
:01265102 
:2 م2 :م4 :م2 : 9و5300132ه2 
: 58215-6231 ,6626573 ,1320218 : 117 خسة ع - 12025 
: 2025-5126 
2102 :21086 


ماا هت 


لك آكن كن اخ أكن أكن أكن أكن ركنا كي كنا 


فم مم مم قم قم قم فم قم كم قم كم 
فر زم 


3 
4 
5 


ززف 03 


م 


0 


وايضا خصائص الاتجاه او الاماكن للديفات حتى تكون كلها الثلاثة بجانب بعض كما في كود الكلاسات : 


) 26175 . 
: 7106 
:م 4999 55114 :ععقطمط 
:2 3232 3م52 323 : 2529012 
م3 3م32 301 : 2-2520131315عك23ه0ط 
: 65656 8 : 10م 
:0111 
:م4 :م2 عام4 :م2 : و 230032 
: 5325-5621 ,6562673 ,3201238 1 : 1117تة 2 -2025 
:5 : 12025-513126 
:203:22 


قاات هزم زم نن ضر ان 


لك كن اك أكن أكيئ كن أكن أكن كن كي أكنا 


لسغ لس فس قم فم شم صم قم قم سم قم قل قم قم قم قم قم قم قل 
كل 


© مات 


. 71515025 4 
106: 
120 06 


ن ش) ش) ث) ثب 


نع 


. 11215 4 
71062: 
2*0: 


هم يم نن ظر ا 6١‏ له 


نن) ن) 


سيكون شكل الفوتير كما في الصورة: 


ادازه محبوتا بصميم واستصاته موايع / الجرائتس اسم تصميم الجراكحس 
قسم تصميم الحرافكس قسم تصميم 


القيام بإنشاء روابط التواصل وعداد الزوار وقائمة للروابط الخاصة بالأخبار 
ننشأ أولا القائمة الخاصة بالاخبار 1ن وعمل تنسيق خاص بها في ملف 16.55 كما في الكود التالي : 


>01 1355-"265"< 

>111< 

<2<>/11/>رواد التكتولوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية <"+#"-2ع82 11<>3> 
<23<>/11/>رواد التكتونوحِيا يتقدم يعرض جديد لعملائه الكرام<"#"-2عطط 11<>82> 

<2<>/11/>دورات تدريبية لمصممي المواقع ومدراء الاعلام الالكتروني فقي المؤسسات<"+#"-262ط 11<>2> 
<3<>/11/> عرض خاص يمتاسبة شهر رمضان العبارك<"4"-2ع22 11<>82> 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يمتاسية شهر رمضان المبارك<"#4"-*#عطط 11<>2> 
<111/> 

>/ 03< 


قم قم قم قم كو قم قم كم قل 
ذم دم نم دم يم يم يم يم نى 
ذم نن شم ان 66 ل- 6 ضاات 


١/08١1: 00967 0‏ 
أع .0 أم حاعع]©ه10]أ :اتجموع 2 00967 :2 عااا8 0لا 


أع طا.0 آم حاععغ. انا لانالانا 


وسيكون الكود في ووح.»5)91 كما في الصورة: 


م 


4 26175 . 
:71062 
:5 24999 50114 :عع0ع2مط 
:2 32322 م5 332 : 2220132 
3232 323 303 : 03135 2020462-53 
: 45865686 :10م 
:01126211 
:2 2م2 +421 :م2 : 25200326 
: 5325-5621 ,626573 ,1320218 : 117 تتتتة ع - 120215 
:5 : 26 2025-5313 
:210835 


فم هم مم مم هم قم فم 
[- 0 رثكن 4 57 زف ززع تا 


5 


ه م تت 


34 11 111 كتزه2. 

76215-06023102 : 26 : 

:2 :2م0010 

2025-5126 : 5: 

13126-63901225: 

2-624 1313 111 26175. 
: © 02315302 2625-06 
:حول 


هم قم قم هم كم هم هم كم 


1 
2 
37 
2 
د 
2 
2 
2 
12 
2 
7 
3 
3 
3 
3 
3 
3 
3 


فم نِم نز كير لر) 6١‏ 


وسيكون شكل الفوتير كما في الصورة: 


ثانيا : نقوم بعمل عناوين للديفات الثلاثئة وعمل كلاس خاص بهذه العناوين وسيكون العنوان عبارة عن ديف صغير داخل كل ديف من الثلاثة كما في 
الكود (سطر )١١‏ التالي : 


كنا 


>017 1355 "265 "< 

<03/> آخر الأخبار<"2011256عط"-1355ه 03> 

>111< 

<3<>/11/>رواد التكتولوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية <"+#"-2ع2ط 11<>2> 
<3<>/11/>رواد التكتولوجيا يتقدم يعرصض جديد لعملائة الكرام<"#"-2ع22 11<>82> 

<3<>/11/>دورات تدريبية لمصممي المواقع ومدراء الاعلام الالكتروتي قي المؤسسات<"+"-12ع2ط 11<>2> 
<3<>/11/> عرض خاص يمتناسية شهر رمضان المبارك<"2-2"#4عطط 11<>8> 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يمتاسية شهر رمضان المبيارك<"#"-2ع2ط 11<>2> 
<131/> 


يقد <01 /> 


ذم دم يم يم يم در 


ان شر ل 6 لك 


دم دم دن 
م ماه دنر 


3 


وسيكون الكلاس الخاص به كما في الصورة: 


4 26 
: © 0231530 2625-06 
: 26 2025-5131 
:م0102 


١/08١1: 00967/ 0‏ 
أع .0 أم حاعع] © هأ :انمع 2 00967 :2 عااا8 0لا 


أع جا. 0 أم حاعع]. /الانانا نالا 


لوالا 


نقوم ايضا بوضع الخصائص لكل كلاس في الفوتير وسيكون شكل كلاسات (71514015 - 11215 - 26595 ) كما في الصورة: 


) 2175 . 
:1711062 
:م 4999 50114 :جع عمط 
:2 3م32 عدم5 301 : 1و2 همد 
3م32 م3 م3 : 25201135-عع0ع2 20 
:458615656 : 10م 
:2ه 012661 
:م4 :م2 عدم4 م2 : و200312ه5 
53225-6212 ,6562673 ,1320138 : 117 ذتتة 2 -12025 
:2 : 2025-5126 
:510365 


0 


هرم نم نم يم يخ يم يم يم يم 


فم نم نز ظر كن 6١‏ لك 


دذة يم 


ذن) ف 


)2 11 111 كتاع2. 

56215-06023102: 6 

بصعي لتانطننت 

2025-5126 : 

(:+*مص24 : عدو 1عط-ع112 

624 113 1خ 2615. 
2 : 26215-06023130 
:2م01 


ذن) ش) ثب 
© ضاات نام نم نن ظر ان 


00 


قم قم قم قم قم قم قم قم قم قم هم قم كم كم قم قم قم قم قم قم قل 


6 


3 
3 
3 
3 


)1-2025 
: 171106 
:6 :21086 
2 : 0312651602 
:م1 24999 505114:عع0عمط 
:+ 3231 1م32 م3 : 03135 2020362-25 
:2 :م2 عدم4 م2 : 230032 
:+ 5232252 م1 323 : 2032 هلط 
: 53225-621 ,66267573 ,1320212 : 1117تتة ع -25025 


والكلاس 112129[: 


4 215 . 
:7106 
:مه لدع 126 
:2 :مم01 
: 2025-5326 
:5 :11226-52610215 
:م1 24999 55114 :ععلعمط 
+ 32م3 م3 م3 : 20622-222011135 20 
كتام5 م1 م3 : دوع همد 
:م4 عزم2 عنم4 عدم2 : و2 252003 
:21038 
( + 5325-5612 ,562673 ,132012018 : 117 تتتة 1 - 120215 


) 6501126 
: 62112 : 32052ع 023 625-016 
: 26 1201315-51 
:#560 :مم1 


وسيكون شكل الفوتير بشكل عام كما في الصورة: 


١/08١1: 00967 0‏ 
أع .0 أم حاعع] © هأ :اتهموع 2 00967 :2 عااا8 0لا 


أع جا. 0 أم حاعع]. /الانانا نالا 


كما نلاحظ تم اضافة روابط (تواصل معنا) وعمل صور لصفحات التواصل الاجتماعي في مجلد (1©6025) وهي كما في الكود مطم.عءع 101 : 


>03 1355-11 215"< 

<0415/>: تواصل معنا عبر<"201126ع58"-13255ه 0137> 

رواد التكتونوجيا شارع حده 

</ عط>» 

تلقونت : 00967714490030 

درت 

تلقاكص : 00967714490030 

</ عط>» 

مه . 511263728200 نالاز_ع : اليريد الإلكتروتي 

جر عل 

جوال : 714490030 

حدر غطه» 

أو عبرصقحاتتا الاجتماعية 

</ عط>» 

ح<ة/></ "32">->11062 "350. 1025/2 "52 وتتلة >< "0 1ظطعع1 مامت . عاأه0طعع3 2 . 6761م / / : 03 ط"-#قعط 38> 
حة/></"32"-طع 114 "ومز.ء ققدم 1" 522 1200 ><" 2626 . ملططعع ص . لمالا / / : موععط" <2قعط ه> 
حة /></"32"ختطع 10 "وم . لالقطمء1 "3522 وذ >< "2226 . ملططعع ص . الا / / : معط" دع ععط ه> 
حة/></"32"ختطع 1710 "وم3. 1 ققدم 1 "3522 وتتلة >< "225. مأططعع ص . اما / /ر : وععط"د2قعط و> 


|د / +«ط> 
<03 /> 


نقوم الان بعمل كود او تركيب عداد زوار الموقع ويمكننا اضافته من موقع (773731.1126013126217:.2012 ) كما في الصورة : 


اذالاأ10/ا!! 155 


| معطلالا .ومتممم معلا ع وومع مط زم لعف ١..؟*‏ 
!0نا0]م 076 013185 ]أ ,منا /010ا5 139 /لا0 3 588 
"عع انمعد عع أهعو عط ,10 ىامقط1 


3أمأوءالا أدع لاا - .!! 800 - 


5ا26 ا وا /لزهدا5 
0 نامج باع العوجم لزه 5 
2 دوداع ثأه ععقصسل" تمك 


0001118 قاط 8لا0! 61 << 


0 


:بيبل د 


إكاع ا لانا00 هشاع ١10‏ عالام ماعنالا 


00200 عممنا لمعناع .لانملا عط )عله اله جمه؟ 5و3]] ععاامء 300 عودممعنلا /زمة مأ عع أونامء عععم] أنه 00م 
]نان[ 003168 5أطا الأننا /زامه غ0لظا .)ع أقنامء )نامث 10 3000 ع6 الأثلا و13 3 ,عأ )نامثز 5115 ألا 0نامع الاع6 3 1000 
إقأ/قك 300 101073000 ومكه3مم3 اقعلاع؟ ااأنزا )عألناه2 وداع )نامز مه وملاءااء أناط ,ولتادعع مأ مهم )3 18أه 


جع لانا60 ععمع عناملا عتفعهك /17 لم51 للا 


3 أعدع؟ | .ومقابط عومقه عط علعأك ,لعاكتوة عناملا معدلالا .معط تعامنم معد توم ون © 
مذانا وداك © 5ع اتأوناهك مه © :غأأد عناملامه مم5 


؟ 2 | الاولاة 10 135 لكناحم0:ةانا 
3 2] 5و3ا؟ ؟ه 5لقثلنااه© 
؟ وزوز | /2أ0ناه© أ0 م10 مه اعطقا 


د5عع 01 تك عزوالا 


ح عععععع #ءمام0 لوناموامو8 


# )ماه0 )ع80610 


(105أ5أ/ا ]ناه أنا8) .كموتاععاع5 )ناملا ووأكن بناءألاع1م يعأوياه© وواع © 


015 ]الا 
6, 357 سس 761,182 5 
33,4 لهل 741, 4و4 515 
4 لك 766, 5بد لا 
3, 275 ”© 650, 407 181 
3 69 لقنا 759 , 399 لهسا 
501 [1 لا 376, 386 5 


111 6ماء 7 


نختار العدد للدول ثم الاعمدة واظهار كلمة زوار ام لا ثم خلفية اللون ولون الخط والبوردير ثم الزر البرتقالي الذي يعطيك الكود. وسنقوم بعمل العداد 
الخاص بنا ثم نأخذ الكود ونقوم بتركيبه داخل ديف 715140125 كما في الصورة التالية : 


أع جا. 0 أم جاعع]. /انانانا نالا 


0 /00967 :ع اا ١/08‏ 


أعراءهأم حاعع]©0]طأ :اتهمطع 


2 00967 :2 عااا8 ولا 


ع1 لانا0 © ععمع عناملا عتفعهك /1 لله 5لاذا 


0 10 00 7و 6 "نان الالآ .معط وعتونمء عنملا مون © 


مذانا و13 65 اناه م10 © :512 ناملا 00 /الز0ذا5 
© داءمقا وذاع /لاها5 # ]واه 0وناموماء 83 0 0 | /010ا5 10 95و13 تنام :3 انا 
#! اناه 0 باع النعوجم ولاق م 000008 #١مام0‏ 10 9 2] 61395 ]0 705نااه© 
#ا دوداع أه )طامنالا /5101 #عمامح ععلرم8 3 همهم ] #6 أمنامك أه مه مه أعذقا 


0008 مقط 8لا70 61 << 


(1605: © غنا8) .5م5تاععاع5 ناملا ووأذنا بناءأباعم يعأويره© وواع © 


1 عماء + 


ثم التركيب كما في الصورة : 


00101161 لا باينا 


نأتي الآن إلى ديف أخير للحقوق ورابط لمن قام بإنشاء الموقع ثم ننتقل للمرحلة الثانية من بناء الموقع وسيكون اسم الديف وكلاسه 1205ع721م0 كما 
في الصورة أدنا : 


في صفحة «رطام.:1006 : 


تايا لديف العام 65 
</ «عط> | دك 
<"0255و1721ممه "-1355 03> اك 
جميع الحقوق متاحة ومقتوحة تللجميع 68 
</ «ط> | كك 
<3/>رواد التكتونوجيا<"210.262طعع6. 17076 / / : 69 8ط"-2ع22 32> : بقدم من| إف 
</ عط> 1 
00 2 
<2125ء 5 / ><" 35 . 062 701513/ 6291261 "ج52 ١‏ "125 3735 3 اع "جاع مدع 35> 0 64 
<125عء5 /><"5 3 . 52325 2617 دوتء "ع2 5 "21526 3735 و /لعجزوح "7 -66اع 6مز1وع 35> 15 
ع7 76 
<لسعط/> | ين 


١/08١1: 00967 0‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 ا اا8 0لا 


أع جا. 0 أم حاعع]. /الانانالانا 


كما نلاحظ تم عمل الديف خارج الديف :23311 او الديف العام وسيكون الكلاس الخاص به كما في الصورة: 


2222م : 662:5-313102 

231# 531215-56 ,662653 ,1320202 : 117 تتتتة 2 -20115 
م12 : 2025-5126 

31150 412:0و222 

م9 95 : طع 710 

#82 :1مك 


وسيكون شكل الحقوق كما في الصورة : 


نقوم باستبدال الصور في السلايدشو بصور أخرى كما في الصورة: 


مرحبا بكم في دورة المواقع الالكترونية 


اكاك سكي 


نقوم بتعديل الطول للديف »1006 ونضع القيمة "٠٠‏ بكسل في ملف الووح.56716 كما في الصورة : 


(229. 1702665720052 / . . ) 1121 : 121366 -0 2نامع وعاء قط 
3150 : 2طو12ع2ظ 

م300 : عخطودعظ 

م960 : طع 110 

2150312 :0 31150 

52 521 0222 0032 : 2-232013115ع20ه0ظ 


أع .0 آم حاعع]. الا لانانانا 


3 
3 
5 
كَ 


0 66 66 هم تن تن جم من 


6 صا 


5و1 


وسيكون شكل الفوتير كما في الصورة: 


ناته ققاء ا 


تقسيم الصفحة الرئيسية الى ثلاثة أقسام ونعني بذلك أن نقوم بتجزيئ الصفحة الرئيسية إلى ثلاث صفحات (مطم.ء0مة - - مرطم.1عع0صة 
مطم.ءء 20 ). 

مطام.ع ل :هذه الصفحة الرئيسية وستقوم باستدعاء الجزء الأول الذي سنقوم بنقله إلى [1م.1206:21 ونستدعيها بواسطة دالة ع0نداعمة. 
«مطام.061م: : تحوي الجزء الأول من الموقع ويتضمن نقل الاكواد من السطر الأول إلى قبل نهاية ديف القائمة. 

مطام.10062 : ويتضمن نقل ألاكواد من بداية الفوتير إلى نهاية الصفحة. 


مطام.016مز : وتتضمن البقية من بداية السلايدشو إلى قبل نهاية الفوتير. 


وكما في الصور التالية: 


20000 0 009677 :|| 1/08 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


1١5ا/‎ 


صفحة مرطام. 1061 


< 01207 . 15101181 1-523115 2121:1011 111107 2121210117 1127 020/7 . 13 . الال 7 7 : 12211519" "211 / 02817 1281215115231 0. 1 -آ224111 71011 711307 7-7 211811 221201 710013225 > 
<"الستطء: / 1999 /وع<ه . 173 7077 / / : جرع عط" >-5 2 تمد لسعغط> 
<20هعط> 
</ "2-8 2ج ناتعع وطاقطه امعط رععردوع "ع تج رع ع رصم "مم11 دع 6 2ه"1-2ناوهة لومطغط لجع 
21026625>/٠612516<‏ و10 مضطءع1 [ الرواد لتكتولوجيا المعلومات<51516> 
</ "5ق /عاع ع "6106-7 "261>"561716526667 " 55ج . 561716 /رقق5ن "5262-7 11212> 
</ "55ع . 55116 /6201261 "2262-7 " ققن /طاجاء "6106-7 "261-53165266 1121> 
<2325 2ح 5 / ><" 3 3 . 217 1012 62903116173 "ع2 5 "021525 37335 3 عجعج "اع 3ع 35> 
ام لشن 
</ "311">-13نعهم "وقن رعجرعع "ععويزع "عع طوة 1زرزع 5 ">261 "5ق . 56116 /رققن /رطه"<2ععط 1131 > 
حفدعط / > 
<01ه0ط> 
<--هتا يداية الديف العام --!>» 
<"12هم"-1355 03> 


دم ين ضر فى بن 


1 


ته مات در يمة ين ضر ان 


ززغا 


<--هنا يداية ترويسة الموقع--!> 
<"2ع5630"-18355 03> 

</ "12610900"->1355 "520 . 1000 /رقع5020ة "-2 5 يلل > 
<01 /> 


© مات 


<--هنا يداية القائمة--!» 

<"ناطعم">->1355 01> 

>111< 

<3<>/11 /> الرئيسية<"222. 2282-1206 11<>8> 

<3<>/11 />خدماتناح<"#40210">-2م6طط 11<>3> 
<3<>/11/>من أعمالتاح<"#4"-2مطط 11<>8> 
<3<>/11/> آخر الأخبار<"4"-2مطط 11<>8> 
<3<>/11 />من تحن<"#"-2عطط 11<>8> 
<3<>/11 /> اتصل يتاح<"#"-2عطط 11<>3> 

>/111< 
>/ 01 < 


|د--هنا تهاية القائمة--!»> 


دم زم نن ظر صن 


زه 


صفحة «رطام. 12062 


<--يداية القوتير--!> 
جح «برع هج "#سومقما 0177 


دم ين 


ضر كن 


<"75ع2"-1355 01> 

<3137/> آخر الأخبار<"2011228غعط"-1355ه 03> 

>111< 

<2<>/11/>رواد التكتونلوجيا تقتتح دورة تصميم واصضاقة المواقع الالكتروتية <"+#"-2عطط 11<>2> 
<3<>/11/>رواد التكتولوجيا يتقدم يعرصض حديد لعملائةه الكرام<"#4"-2ع22 11<>3> 

<3<>/11/>دورات تدريبية لمصممي المواقع ومدراء الاعلام الالكتروتي قي المؤسسات<"+"-2ع2ط 11<>2> 
<3<>/11/> عرض خاص يمتاسية شهر رمضان المبارك<"#"-2#عطط 11<>2> 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يمتناسية شهر رمضان المبارك<"+#"-2ع2ط 11<>2> 
<111/> 

>/ 01 < 


لزن 


<" قاد ة 1 "عو 5م18 03> 
<041/>: تواصل معتا عبر<"528201122"-1355ه ”01> 
رواد التكتولوجيا شارع حده 


</ عدط»> 

تلقوت : 00967714490030 
ادكه 

تلقاكص : 00967714490030 
</ عط>»> 

0 . 51126373200 نالز_طع : اليريد الإلكتروتي 
</ عط>» 

جوال : 714490030 

</ عط> 

أو عيرصقحاتتا الاجتماعية 
<ل عط>» 


<ة/></ "1062-32 "0م30 . 2 /525م10" 52 ونندة >< "0 1ظلطعع1 /نامن . 232001 . لما / / : 23 عط" -2عطط > 
<ة /></"32">-25ع 17104 "وم3.ع /قطم1" 522 3736 >< "226 . م لططعع ص . 1767 / / : معط" قعط ه> 
<ة /></"32"ختطع 1710 "ومن . را رقطمء1" 5122 3730 >< "226 . ما لططعع ص . امول / / : وععغط" 2 قغعط و> 
ح<ة/></"32">خع 10 "وم3. 1 /25م2"1تج2 5 1710 >< "2625 . م1لططعع ص . ماما / / : معط" قعط > 
</ عط>» 

> 01< 


<"571515025"-1355ج _ 01> 


ا 0 /00967 :عا |08 اا 
أع جا. 0 أم جاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 00967 :2 ااا كلا 


صفحة مطام.عع 10 : وهو الكود الذي مابين نهاية القائمة 


<-- و1:7صمدنوه<2 1 
<"”1355>"511046ه 01> 
<" 5212621 ظمع-062 310-10115131 01> 

<5_1101205"<>111"->1355 01> 
<57051_0"/<>/11"->10 "نرحبا يكم في دورة المواقع الالكتروتية"-©6181 "عنتوان 1"-3215 "5220. 05521/1508665/1" 52-2 19 >< 11> 
<51_1"/<>/11ه0”"-10 "ا عتوان 2"-561516 "عتوان 2"-315 "220. 2 /1589665/ 512-0865321 1200 >< 11> 
<51_2"/<>/11هاه"-10 "عتوان 3"-21516 "عتوان 3"-315 "5220. 26635/3ههة/02531"-52 ومذ>< 11> 
<51_3”/<>/11ئاه"->10 "عنوان 4"-61516 "عتوان 4"-315 "520. 4 /5عوقتة/ 52-0831 10 >< 11> 
<051_4"/<>/11"->10 "'عتوان 5"-61516 "عتوان 5"-315 "520. 5 / 11089665 /03531"-52 1210 >< 11> 
<01 /><111/ > 
<112255"<>01ن1اط_5"-1355ه 017> 
١. 320” / <1>/3<‏ تتناقتء 326 5 نالك / 03531/50015385 "5712-2 1506 ><" عنوان صغير"-12<16ج "2<"4عطط 83> 
<350”/<2>/3. 0652 /52"08531/50015125 11010 ><" عنوان صغير"-18516ج "#"-2عطط > 
<3>/3</ "31590 . 023526635ن[ط/ 500151525 /03531"-52 ينة ><" عنوان صغير"-16غ1ج "4#"<-2عطط 83> 
<329”"/<4>/3. 61117515 512>"03531/50015125/3 17200 ><" عنتوان صغير">-12516ج "#"22عطط > 
<3290”/<5>/3 . 111125 500151257 /055317"-52 قوننة><" عنوان صغير"-1816ج "#"<2عطط > 
<017 /><017 /> 

<01 /><"5_523200"-1255ه 03> 

>/ 017< 
>/ 01< 


>! --1850 513106 52016--< 


ذن ظر ان 


لزغ 


لك 


هم كم مم قم قم كم كل قم 
م قات دهز يم نن شر ص 


ززها 


<-- يبداية محتوى الموقع --!> 
<"6 2ع 6 رم "1355-7 01> 
<"+«مط-وهج "1355-7 01> 

<22/>ماتقوم يه رواد التكتولوجيا<22> 

<عط>»> 

<م> 

موقع إتلتكتروتي متخصص في تكتولوجِيا المعلومات ويقدم خدمة تصميم واستضاقة المواقع الالكتروتية والتسويق الالكتروتي 
مواقع : رصهية - إخبارية - تجارية - تعليهية -قواعد بيياتات 
إعلاتات ممولنة : قيص يوك - جوجل - تشرات الكتروتية رسمية 

>/«< 

>/ 017< 


م قاات فم يم نن شر ص 


فم مم زم زم نِم يم يم بم يم يم 


١ه‏ كل 


0 ءَ : 1 قوم ححوع 
<> نحرَء انلثاتي من المحتوى 3 


<"9210"-10 "14_3عو"-61255 01> 


الخطوة الأخيرة وهي اضافة دالة 10ح لبداية ملف «رام.<:1206 واستدعاء الصفحة 1م.1:016:21 كما في الصورة : 
1 
<2: ("مطم . 120611" ) 1211106 «طتطم2 > 


بنفس الطريقة السابقة نقوم بإضافة الصفحة مرطم.06:2س1 لنهاية الصفحة مطم.عع 10 كما في الصورة: 


<-- تهاية محتوى الموقع --!> 


<2: ("صطم. 2022 1") 1ع ص1 ويطوج> 


بعد تجزيئ الصفحة الرئيسية واستدعاء الملفات او الجزئين ستظهر الصفحة الرئيسية كما هي سابقا. 


ا 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانالانا 


أعجاءه أمحاعع]©0]مز :اتهممع 2 00967 :2 عااا8 ولا 


المرحلة الثانية (قواعد البيانات) 


سنقوم بعمل الجداول التالية (القائمة - الخدمات - الأخبار - مدراء الموقع ) : 


قاعدة البيانات )ع 6ع[1:0م7 

الجدول الصفوف 

1 اع - هع -101 

517 اع - عسآ - 0هعط -10 
لنت أ - 20عط - 021 -101 
سمتسلج 00 - 102هم -101 


وسيكون شكل قاعدة البيانات مع الجداول كما في الصورة : 


| [2]غدمطلدعها » © غععرمعم » 8 متصقد 


الرقم - عنوان القائمة - التفاصيل 


رقم الخدمة - العنوان - الصورة - تفاصيل 


الرقم - التاريخ - العنوان - التفاصيل 


الرقم الاسم الباسورد 


طق عمليات | 3 ورعوو1,1 


[2] استعراض | آنا يناء | (للل 501 | نا إيحت | 4 إدخال | +] تصدير | (5] استيراد 
الجدول 0ه العملية صقوف إ9) توع مملغهاام) الحجم الحمل الزاند 
© متصلج 5 استعراض آمل بناء هذا إبحت 6 إدخال © إقراغ © سقط >0 1000108 أء_اقع0عءو_ةأنا 16 كيلويايت 2 
ل) تامعدم 7 استعراض مز يناء #. إيحت غ إنخال 99 إفراغ © مقط +9 1800108| أء_اوعمءو_ةثأن 16 كينئويايت - 
5 دبعم [5] استعراض إتمل بناء ذا إيحت 6 إدخال © إقراغ © سقط >0 1570108 أء_اقع8_980أنا 16 كينويايت ف 
[] معو [7) استعراض أو يناء # إيحت 6 إدخال ا إفراغ © سقط -0 ناممما أء_اوعمعو_ةن 15 كينويايت 9 
4 جدول (جداول) المجموع © 08مهما أء_امعمعو_قن 54 كيلوبايدت 0 بايد 
4 سس [إسمس ‏ ]] 


والجداول كما في الصور التالية : 


جدول 21311 : 


5 تق :دوطادعها » 8 غععرممم » 58 متصلد - 


[5] استعراض | مإ يناء | (كل 501 | ذا إيحث | 4 إدخال | +م] تصدير | 1ك استيراد | #/ى عمليات || 25 10109675 
# الاسم توع 00100 الخواص حائي إقتراضي إضاقي 

2 141 (3)غ10 لا الاعصىء ‏ [الااعالاعان)اظا_0آلاط صق 

[) 2 عصهم (30)88اع,3/ أء_اوعمعو_قتأن له لصي 2 

5 3 ل0مللاوقهم (30)68اء,3/ أء_امعوعو_ةأأن لا لاقىء 74 


1__ [تحديد الكلمعالمحدد. | 7 استعراض - تم تغيير © سقط 9 أساسي 33 فريد 5 فهرست 


أع طا.0 أ حر حاععغ. انا نالا ناا 


أعجاءه أم حاعع]©0]مز :اتهممع 


العملية 


تغيير © سقّط هي أساسي 9 فريد [4 فبرست 75 |2412م5 [7] النص كاماد [5] 85ن|3/ا 01511061 
تغيير © سقط ذيٍ أساسي 9 فريد كي فهرست 75 |3419م5 [7] التص كاماد [2] وهنااهلا 015410 
تغيير © سقّط 9 أساسي 9 فريد [ فبرست 75 /3613م5 [77] التص كاملة [] 5عنااهلا 01541001 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 ااا كلا 


جدول 121111 


7 غده«الدعها » © غععرزمعم > 98 بامعم 


[2] استعراض | آم يتاء | (كل 501 | ط3ا إيحتث | 4خ إدخال | 4] تصدير | 2 استيراد | ©ّى عمليات | 22 72109615 


# الاسم توع 0 الخواص حائي إفتراصي إضافي العملية 

6 1 كذ (4غما نغ لاتسىء [[ااعاالاع08ظا_0آلاه ىم تغيير © سقّط هي أساسي 9 فريد [5 فيرست 75 |3412م5 75 النص كامد [5] 85 ناولا 01541061 

| 0 2 لفهعط (77)دععود ء_امعمعو_قتان لاغ الاتسىء 7 تغيير (© سقط (ي أساسي [9] قريد كي فهرست 56 |413م5 [7] انتص كاملد [2] 65ن/ة 01941066 
ا 5 3غهل (3:)222 عد أء_اوعمعو_قن لا لاتىء م تغيير © سقط يي أساسي 9 فريد [5 فهبرست ,75 [11م5 7 التص كاماد [2] 5هناةلا 015610261 


]| #__ (]تحيد الكلمعالمصدد | [) استعراض - تيى تغبير © سقط 9« أساسي 338 فريد [5 فهرست 


جدول 116375 


27 غدوطادعه! » © غععرمام » ا ممم 


[2] استعراض | آنا يناء | ([لل 501 | ا إيحث | ## إدخال | 4ه تصدير | +2] استيراد | © عمليات | 36 1010965 


# الاسم توع 10 الخواص خائي إغفتراضي إضافي العملية 
6 1 كذ (3مما لغ لاتسيء [[اعالاع08|١ا_10لالهم‏ حي تخيير © ستط هي أساسي |99 فريد [5 فبرست 75 |2113م5 2 النص كاماد [9] 2/25 5]1061وا0 
[]) 2 86ل (3:)33زعةا اع_اوعمعو_قأن الاعمرة ىم تغيير © سقّط أساسي [13] فريد [كنْ فيرست 5] |50212 |72 ] التص كاماد |5 5ه لاهلا 5]1001ا0 
5 3 لهعط (3))222اع,هن أء_اهعمعو_قاأن لا الاتىم ى تغيير © سقط (ي أساسي [9] فريد [ فبرست 75 |112م5 (72 النص كاماد [] 30065 1064أو01 
0 4غهل (53:)333ع,3لا أء_اوعمعو_وشن اك ى تغيير © سقط (ي أساسي [هق] غريد [ك فبرست 75 |41م5 [ج] انتص كامد [2] 65ناله/ا 1061أوا0 


4__ [0 تحديد الكلمع المحدد:. 9] استعراض 2 ىم تغيير © سقّط هي أساسي 3 فريد 4 فهرست 


جدول 7ر5 


[اغدوطالمعها »> © غععرزمعم » 78 بمعد 


5 استعراض | تل بناء | (ل 501 | 3 إيحث | 4خ إدخال | 8] تصدير | [ك استيراد | /ى عمليات | 36 15ع31:109 أ 


# الاسم توع 100 الخواص حخائي إفتراضي إضاقي العملية 
15 هذ (3)امة وه الاتسىيء [[اعالاع10١ا_0آلام‏ م تغيير © ستط هي أساسي 9 غريد 0 فيرست 75 [613هم5 2 التص كاملا 9 ولاه 0101006 
[) 2 فهعط (88)داعمهنا أء_اوعوعو_قأنا ل م تغيير © سقط 9 أساسي هق قريد كن فبرست 756 [112م5 [7 النص كاماد [2] 5عنااهلا 0191004 
5 3 ومذة (3))222عنقل أء_امعمعو_قتأن لا الاقىء تغيير © سقط هي أساسي 9 غريد [5 فيرست 75 |5301 [5) التص كاماد [55] 91085 01561061 
[]) 4غهل (03:333ع:3 أء_اهعمعو_قأن ات تم تغيير © سقط هي أساسي [ه] غريد[جن فهبرست “75 /119هم5 [ج7] انتص كامد [2] 5هنااهلا 01941004 


'4_ [ تحديد الكلمعالمند. ١‏ 5 استعراض- م تغيير © سقط 9 أساسي 33 فريد 42 فهرست 


0 /00967 :ع اا8 اا 


الام ار أعم.وأمطاءةهم6/مز :المع 772755202 2:00967 08/186/ 


مرحلة ربط قواعد البيانات مع التصميم 
في هذه الخطوة نقوم بعمل مجلد 20:11 للصفحات وكل جدول له مجلد وسيكون كما في الصورة : 


ع5 م1 70011 ع:03] عصةلا 


8 
له 
9 
1 
3 
- 


عنام عا ا5ضاء م5/75٠/15١٠‏ 
عام عا م 75/ط١٠/15١ ١‏ 
عام عا +١:‏ م5/75١/15١٠‏ 
عام عا ١١:2١‏ م2/78١/15١١‏ 


55 5 
3 2 هم 
50 


نقوم بتصميم ستايل معين للصفحات التي ستدير الموقع وتتضمن خلفية وديف وتنسيق للنصوص وسنبدأ بصفحة الإدخال الخاصة بالقائمة داخل مجلد 
اعد ننشئ صفحة اسمها «ام.)61وم1 والخاصة بإدخال البيانات الخاصة بجدول القائمة. وسنقوم بعمل كلاسات للتنسيق وذلك بعمل ملف وو 
وسنسميه 2031.055 ونعمل له مجلد بجانب المجلدات أعلاه ونسميه ووح. ندخل الان المجلد 72261 وننشئ الصفحة «رام.125611 ونقوم بعمل 
الكلاس اللازم وربطه بها. وستكون الصفحة «رطم.12561 كما في الكود: 


<51516 />مقحة إدخال بيياتات القائمة<61516> 

</ "نقتت /لعجروع "عم مزع "عع طوء 5:31 "2261-7 "ققج . تختتةة “ردقه / . . "د#2عطط 111> 
ح<لدعط /> 

<0017ط> 

<"تخسةة ">-1355ه 03> 


<0417/> إدخال بياتات القائمة <"ط"-1255ه 0197> 
</ «ط></ «ط>» 
القورم هتا 


<019 /> 
<تتقوط > 


والملف الموجود في مجلد ووح والذي اسميناه 21212.55 كما في الصورة : 


م2 
44 :0102 -20تاه 2 وع1ء 2ط 


5 
6 


4 صتسةتة . 
: 22 :0-0102 صتتناهع وعاء 3ط 
:2 50114 4666:ععلعمط 
:2 : 7106 
:5 :: ططودعظ 
:311560 152012:0آ1 
:0 126061 
: 5325-5621 ,662673 ,1320212 : 117 ةع -12501215 
:2 : 26 120215-53 
:2 1123252 5232 11232 : 2300326 
م4 :م4 :م4 : 202062-25301115 
1 


24 
: 5325-5621 ,6626573 ,13202182 : 1117تتتة -120225 
لع :عمل1مه 
: 126+ : 02 52625-06023631 
:22522 :2و 25-211زه جح 


١/08١1: 00967 0‏ 
أع .0 أم حاعع]©10أ :انمع 2 00967 :2 عااا8 0لا 


ع طا.0 آم حاععغ. نا لانانانا 


وسيكون شكل الصفحة «رام.)“ءودز في الرابط (دردام.)1ء 125 / نامع د د/سنحسل/اءء زه::م/)5ه1د»10//:م)1ط) كما في الصورة : 


كك نف 1 7 © ل« لخ هه ؟ مام ع كص نامع صم /ستحملق/عء زهم/أدومطاهىها ذا ١‏ © جه » 


القورم 


نبدأ بعمل صفحتي الفورم وعملية الادخال الخاص ب جدول 226211 (7102655_] اع كا - مططم.)رءكمة) : 
صفحة «رطام.]51م1 : 


<017/> إدخال يبياتات القائمة <"ط"-132535ه- 01> 

</ «ط></ ع«ط> 

>017< 

<”"0356ج" 1165200 "2ط2م. 55ع20ج_26ء 125 " ->02 3621 20> 


: 
12 


فم 
/ 


14 

</ #«ط> :العتوان | 3ك" 

</ #«ط><"80ع26"- 235716 "نعدعن "6106-7 6تامد1> 16 
</ #2«ط> :التقاصيل| 09اة 

<3ه<32 نيزج /><”52"40 1و "7"موبزوع "0667"-237316 661263263 > 18 
</ طط> | كه 

<"حمقفظ"-731116 "ع ق1ننطنات "-51526 5تاط12> 20 
ختمحامع /> 2 

22 >/ 01< 

<00177ط/ > | أعث 

<لسعط/ > | يض 


شكل الصفحة بعد تعديل الطول للديف «1ؤزم ]2 إلى ٠٠١‏ بكسل: 


27> © خا له هم اه محام اع كو أ/ناصع طارص أله /ع زهم/أومطاهها 5 | "© جه » 


العنوات: 


0 0 /00967 :ع اا ١/08‏ 
١ 00‏ أعجا.هأم جاعع] ©1010 :اأهماع 2 00967 :2 ااا كلا 


نقوم بعمل صفحة «[[م.8 دمح والذي يحوي كود الاتصال بقاعدة البيانات ونضعه ضمن المجلد 710604 والكود كما في الصورة: 


حيطاط2 > 


("" ,"2006" ,"1062152056") 0 26دمه_لو وتم > م5 
: ("0معععجدمه ع متصقء") 036 عه 


: (2مت5 ,"نمع 203م") طلق_ععع2017501_561 


2 


وايضا قمنا بعمل ملف اتصل آخر مطام. نع لدم» لصفحات الادخال كون الكود السابق ينطبق مع صفحات اخراج البيانات وسيكون الكود لصفحة 
مطام.2ع6 درو كما في الصورة: 


حرطاط2 > 
: ("2ء52036" ,"" ,"2006" , "1021520587") عع دم _11ن دتزتمس خصمء5 
2 


8 صفحات التعديل و الحذف نستخدم الملف ممطام.ع تكددمء وا ف صفحات الإخر اج نستخدم او نر بطها بالملف مطم. 2ع صم 


صفحة وام.ودوءع10م_)اء وم 


<212516:/>عملية ادخال البياتات<251516> 

</ "ققت /لعجرمج "عم واع "عع م قمع 51 "2561-7 "5ق . تلش “ردقن / . . "قط 1121> 
<مدعط/> 

<017ه0ط> 

<"112تةة "1355-7 01> 

حبطح2 > 

: ("ططم. 21602دمع / . . / . . ") 1211106 


6 ه >لوعطه5 
1'عع2051]'0_ودععن؟ 


:" ('خع5062 ' , "55820 ' ) 5ظظتانته7 (0468 ,2820) نتصطعم 11110 1115881 "5501-7 


((5591 ,ضمى؟5) تاتاعناي_5011ئمه! ) 12 
1 
((5602) 2202ع_25011آ10 . ' :2مععظ')ء01 
) 

"تمت الاضاقة يتجاح" مطعع 


:"<3/>عودة للرئيسية<'22ص.2ع120/ . . '<2قعط 88>" مطعع 
: (صمءى؟5) 61055 _11ن كته 

2 

> 015< 


في سطر ١١‏ ربطنا الصفحة بملف ال«ام.2024482 والتي تحوي الاتصال بقاعدة البيانات ولاحظ (/../..) أي اننا نعود للخلف لان الملف في المجلد 
الرئيسي بالموقع وبقية الخطوات تعلمناها مسبقا. في سطر "؟ رابط العودة للرئيسية سيتم ربطها لاحقا بعد الانتهاء من ملفات المجلد 2210 الخاص 
بالقائمة. 


وبهذا انجزنا عملية الإدخال نقوم الان بإنشاء صفحة 12016.01 والتي تعرض البيانات وتحوي روابط للتعديل والحذف وهي كما يلي : 


١/0811: 009677 0 77100‏ 
لام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


حرطح2 > 
: ("ططم. و21 مع / . . / . . ") 121110 


:("256 104 لا8 08215182 لدعم 580114 * 581:01" ) باعدعناكو_لن كتمدخ 1نادعءع 5 

2- 

<لسغط> 

<13516خ/> القائمة<21516:> 

<"ققء عوج "حم وزع "ععع لوه 1رزع 5 "2861-7 ”55ج . 30012 “ردقه / . . "معط 11> 
<20ههعط> 

</ "2-8 جاجع وططاقطه :مطل رععرمج "عت لع ع دمت "6-15 2م ع دهن "17-2 ناوه مط 0ط وطعع 
<مدعط > 

<0017ط> 

<" 22 ن1سة3 "-1355 01> 

</«ط>< /«ط><3 /> إضاقة جديد<"29م. 6اء 222-125 38> 

حيطح 2 > 


فز نِم ني) شر هل) 6١‏ لب 


4 


ما د 


0 2 6 5 5 5 5 1 5 إك كن كن ذكن ذكن أكن كن (كن كن ذكن 


؛ فم يم زب كر هن 


5 


: "<2 3131902-62 0>-2ع206مط 1062-١ 1005 ١‏ ع 1طوع>"” قطعهة 
:-<102-290000وج50 >" مطعهة 

:"<20/>عتوان القائمة<20>" وطعهء 

:"<20/>تقاصيل<50>" وطعءع 

:"<20/>تعديل<50>" وطعهة 

: "<عع/>" مطعهة 


ت6 ما 


4 (8152م عدت ح1بروعع ؟) 12 
01126 «7مطعء اععطععط5 :1080 // : (()2م2عع_لوقكتتس) 0413 


ت ذم ذخ نن ضر كن 


1 


لب 


م0 


؟ ( (5225111) 322217_طءطع2_لنوودتقمط > 7م520) 211 
"دعج4>" مطعهة 
: "حل / >" . [ 5 20ع2 ' ] بأمعد5 . "اجلجع>" مطعهة 
: "<20 />" . [ ' 062 ' ] ابأمعد؟ . "<ل0 >" مطعهة 
: "<20 /><3 />حذق< ' [10] مم2 2104-5 وطم . ع166ع0 ' عط 23> [ <3/>تعديل< ' [10] لامع 2310-5 وطم. 031ه ' 2 قعط 43ع620<6>" مرطعهة 


اذ 


نن) دن 


مق تت شر يم ين 


1 
:"<16طوع />" مطعهة 
2 


ذ) ذر) ١‏ 
ظر ا) 


دن 
2 


تم وضع الكود ضمن ال(7007). وستكون النتيجة كما في الصورة بعد ادخال بيانات تجريبية : 


7ت ها تف 85 7 © -« ل 2ه + /نامع د /لصتحمله باع زه:م/أومطاقه! 5 ١‏ © ج » 
اضافة جديد 
عتوان القائمة تفاصيل تعديل 
الرئيسية تفاصيل هنا حول الرئيسية تعديل | حذف 
خدماتنا تفاصيل هنا حول الخدمات تعديل | حذف 
من نحن تفاصل حول من نحن تعديل | حذف 


ولا ننسى أن نغير الارتفاع إلى 2060 للكلاس 201311112 وهو نسخة من :23211 لمقاس أكبر وقت والحاجة كما في صفحة التعديل. 


ننتقل الآن لصفحة التعديل م[م.016© وسيكون الكود كما في الصورة : 


ا 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


الجزء الأول : 


فر 


حرطم2 > 

: ("ططم. و1عغدمع / . . /. . ") ععده_ع0 1ع ص1 
((1[1'ع50822تا' ] 5_2051) عع155) 12 

1 


دم 


فى ضر صن 


1 ؟ - 5104 
2051_؟- هع 52 
6 ؟5-<جع50 


لزنا 


1 


تن فق د 


هم هكم فم 


1طةقء غعطء 6ددع 503نا/ / 
: ("10-5104 تلقظهق1 'عع50 'ععع0 , ' 20هع5؟ ' -20ه2 5151 ننوعم 12908115]") باع ناكىو_1ن دتسدتء 1نادعع 5 


* 


ططم . +1201 15 12 ,85 تناد 12 . ©2366 015213177 226 ه50 ولمععع: لع // 
: ("ططم. عد12206 :2ه10ع ع0" ) عع0قهفط 

1 

2 

حرطام2 > 

1نا متوع 2 104 و12طععو // 

1 ؟ - 510 


4 2ة انا دعقم 6215 ع1 35501360 04363 5616129 // 
: ("10-510 1222 202210 لامع * 62 561") لاع ناكي_لن دتسدتء دادع 5 


( (3111ع52) 322317_طءطع2_لن 5م5201 ) 211 


1 
:["8520 ' ] 7امع؟ > لوعفطهة 
'ع7]'06مع؟ > ععنه5 

1) 

2 

<لسغط>» 


<21516:/>تعديل البياتات<2<1516> 

<"قق /لعجاوج "عم وزع "5ع 261-75313528 "5ق . لتتتةة “ردقن / . . "د2قعط 1112> 
<20ع2> 

</ "2-8 ع داتع وطقطه : تغط رععرعح "عت ع ع رمه "مه15- 2ع 2ه "157-2ناوه -ططغط وععده 
<مدعط / > 


الجزء الثاني: 


<01ه0ط> 

<" 2صنتسدة "1355 03> 

<3/> الرئيسية<"ططم. 2م150" 2عطط 3> 

</اع«ط>< رعاط> 

<" "2م 1عع3 "203526"-200ج 212 " 1نتده2 "-23116 لئاه > 
<"0">-2ع20مط ع1طوع > 


<عع> 
<20:/> اسم القائمة<0<> 
ح<0ع> 
حقء /> <'<52820:2 ومطعه «رطن2>' >731112 "2630"-23116 "تكزعج "61506-7 6اتامد1> 
<عء /> 
<عع > 


<20/> التقاصيل<0<> 


حلء /> <2ع2صغيرءج /><2 :ع506 مطعه و7رطن2 ><" 7"دورزوع "40"-135وم "066"-237116 3ع2632اء6 ><50> 
<عء /> 
<ع22> 


<لع /> <'<1051[2:2١]681_ه5‏ مطء© صططط2>' >-7311146 "10">-23716 "210062" 1506 6نام50<>15> 
<0/><"تحديث”"-721116 "ع66قل50نا" دع لتق "ع تسطناة "عع جلاع عاتاصوصة><لع > 
تحتوكت 
<ع1طقء / > 
حسحدهمع / > 
<01 /> 
<تاق هط > 
<لمتطط/> 


لا جديد في الأكواد وكلها مكررة وبنفس الطريقة وحسب ما تعلمناها مسبقا. 


ا 0 /00967 :عا اا8 اا 
أع (جا. 0 أم جاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


نأتي لصفحة الحذف «رطام.ع)»061 


حتطح2 > 
211 2ه1ئ2ع26مدمه 0482588356 526 1211101290// 
("ططم. و 11دمك / . . / . . ") 121110 


1ن تتمعي 0853 عطء ذه 104 وصتةطنعو // 
72 هه - 514 


1طة تلتمعة تامع عطءع ون1وعء1ع0// 
: ("10-510 ع2ع2 ناعم 28014 2151:1515" ) لاعدعناك_لن دتزسحتت 1نادع2؟ 


(ططم . عدع120) 3296م 043152123177 2526 50 220122623120 // 


: ("ططم . عد 1220 : مم 1ع 3ع مآ" ) موقط 
2 


عمل صفحة م.1206 داخل المجلد 20101 والتي ستكون لوحة التحكم الخاصة بمدير الموقع ومنها يصل المدير الى صفحات القائمة والأخبار 
وغيرها للتعديل والحذف وتتكون من روابط فقط وسيكون الكود كالتالي : 


512 م1 70011 عقن عحمةلا 3 
ععلاه؟ عاع ‏ (1:5-٠م15/0/55ء”‏ متصلة لال 
لاه عا ١7ئت.٠م 7١15/5/55‏ دى لا 
ععلواهعاع ‏ [ائه٠م ٠15/01/75‏ بمعم لال 
ع اه؟ عام م1/15١/15١١‏ ديعم لل 
علاه؟ عاك (1:5١٠م‏ 15/0/78 معد ال 
118 غمنع5 ملام 1:75 م15/1/75١7‏ ممم :5 
الكود 0 
<20هعغط> 


</ "2-8 خط ناتعع وطقطه : للتغط ع عرعع "تن رم ع رمه "25-11756ت 5 ده "115-2اوه -2 25 وطععم 
<81216/>نوحة التحكم بالموقع<51516> 

</ "5ق /ععزهج "6106-2 "261-53165166 "55 . 30032 ردقن 2262-7 1121> 

<مدعط / > 

>20017< 

<"”012ةة "-5 135 01> 

<0417/>مرحبيا نك قي لوحة التحكم || رواد التكتولوجيا<"ط"-13535ه- ”01> 


</ عط> </ عط> 

<2/> الأحبار<"4" دل عط 2> [| <3/>القائمة<"ططم. +120 / تادعم" -12ععطط 35> 
</ عط> 

<2/> مدراء الموقع <"#"-2عخط 2> || <3/> الخقددمات <"#"-<2عطط 28> 


</ ع«ط></ عط> 
<01 /> 
<7خ2001/ > 


ربطنا القائمة بالملف [م.<:1:016 الذي بداخل المجلد 221 وهو الخاص بالقائمة وهو الذي أنشأناه وسيكون شكل الصفحة كما في الصورة: 


9 #/ر نحم له /عع زهمىم/أدهطاةءه! ذا 


القائمة || الآخبار 
الخدمات_| | مدراء الموقعو 


0 /00967 :عا اا8 اا 
أعجا.ه أمحاعع]0©1]طأ :اأهممع 2 /2:00967 ١/08١1‏ 


أع جا. 0 أم حاعع]. /الانانا نالا 


نقوم الان بعمل الصفحات اللازمة لجدول الأخبار 126185 : 
نقوم بعمل صفحة الادخال «[طم.15©11 والصفحة التي تقوم بالعملية مام.ووع100م_15©126 بنفس طريقة عمل ملفات الجدول 1212211 : 
صفحة «رام.)1051 : 


اعالتاءكت 

</ "2-8 عط ناتعع 5ط قط : ال7طط ارععدعج "عت رع ع رمه "25-11502ت 6 دهن "17-2 ناوه -وطغط وطععده 
<21216/>صقحة إدخال يياتات الأخبيار<1816<> 

</ "وقتن /لعجروج "عمويزع "عم مقع 1زز 5 "61-7 "ققح . 2 تتقةة “ردقه / . . "7 ععدط 1151> 
حمدعط ل > 

<017ه0ط> 

<"12سةة "1355-7 03> 


نن ظر ان 66 ل 


8 
0 


هم 
تِ 


<01/> إدخال يياتات الأخبار <"ط"-133535ه 03> 


1 

</ عط></ عدط> 1 براه 

123 >015< 

<"56ه20">-2200ع11 "قططط. 655ع20«ط_26ع 125 "-052 3661 ام > 14 
</ «اط> :التعتوان | 3" 

</ عط><"2630”-23716 "عدت "6106-7 6نام12> 16 

</ #ط> :التاريخ 17 

</ ع«ط><"”<2 : ("ل /س/لا-1") ععهقكق صمطعهة صيطع2>"-ع731112 "ع0866"-23712 "كزوج "6102-7 عتامدة>» 18 
19 

</ طاط> :التقاصيل|. هات 

<3263ععزعح /><”"2"40هو زو "7 "دووزوع "6ع06"-237116 6163263 > أ 
</ ط> | برسم 

<"حملقفظ"-7731116 "125نقطنا5"-51526 115ام12> 2-5 

<20123 / > ل عرص 

<03 / > | حيس 

<0017ط/ > | ونث 

<221ع2/ > | اناس 


الجديد في الصفحة السابقة أضفنا التاريخ من خلال كود مام وسيتم ظهورة بشكل اتوماتيكي وستكون الصورة كما في الصفحة : 


- فت + 7 5 جا له شه ؟ ودام اع كص أردلفقاء 0 /نأحله/ء زه1م/أومطاىءه| 5 ' © جه ©» 
ادخال سانات الأخبار 
الا _ تت 
إرواد التكتولوجيا يقيم دورة تدريبية | 
التاريخ: 
١‏ 25027-2014/04/29 70 
التقاصيل: 


أتقاصيل حول الدورة التدريبية هتا 


ا 0 /00967 :عا |08 اا 
أع جا. 0 أم حاعع]. /انانانا نالا 


أع اه أمحاعع]©0]م1 :اتهممع 2 00967 :2 ااا كلا 


صفحة «إطام.ووء1:0م_)ناءومز : 


من 


<212516/>عملية ادخال البياتات<251516> 

</ "5ق لجاع "عع رزج "5ع12526ئز261>"5 "5قج . 2 1نتةة “رققن / . . "د#عططظ 11> 
<موعط / > 

<خ01ه6ط> 

<"2نسةة "-1355 017> 

حرطم2 > 

: ("ططم. 2192 دمن / . . / . . ") 1211106 


رز 


ب 


قم مهم فم 


؟ حلدوعط5 
6 ؟ حهمج ه50 
5051]06_؟دععل؟ 


هو اهنع 
م قات هزم يم ين ظر 


إزفا 


ززغا 


:" ('عع50 ' ,'عع قل ' , ' 20قعطة5 ' ) 5ظالانتق7ة (ع062, م085 , 204هط) 5ع 11110 1115813 "1ن و55 


© م د 


هم فم مم فم مم يم فم 


( (5591 ,ده 5) ناعنك _11ودتته! ) 12 
1 
)2202ه_1075011 . ' :2لمععظ')ع01 
1 
:"تمت الاضاقة يتجاح" صمطعع 
:"<3/>عودة للرئيسية<'1206<.222/ . . '-2قغط 43>" مطعهة 
(دمن5) ع105ه_011 0175 
ح-2 
<03 > 
<001ط ل > 
<لمطغط /ر> 


قم 


نقوم بعمل صفحة عرض البيانات هي 1م.1206:2 داخل مجلد 26185 وسيكون الكود كما في الصورة : 


طططم2 > 
: ("ططم. و21 2مك / . . / . . ") 1211106 


"250 14 لا8 08258 دباعم 58011 * 5581:1501" ) لاعاعناي_لن درست 1نادءط؟ 
2 


فم يم ين ظر صن 


<لسغط> 

<212516/> الأخبار<1516<> 

<"ققت /عجاعع "عع ورزاع "261-51135288 "55ج . 3ش “/روقن / . . "د#ععط 111> 
<موعط> 

</ "152-8اتج 6 5ص قطه ‏ : لم2 /رععدعع ">6 2ت 6 2م "005256525-1156"-011315 2562-6 63> 
<لدعط/> 

<7خ0:1ه0ط> 

<" 2020122 "->1355ه 01> 

</<«ط>< /«ط><3 /> إاقة جديد<"ططص. 6ع 2282-3125 > 

حرطم2 > 


ل ص ص < 


هم 
* 


: "<2 3131922-62 20م عمط ' 1005 "2ع 10 ع1طقع>" مطعهة 
:"< 20102299000 دع>" مطعهة 

:"<20/>العتوان<20>" مطعهة 

:"<20/>التاريخ<20>" مطعع 

:"<20/>تقاصيل<50>" مطعهء 

"حقلخ /عتعديل<50>" ممه 

: "زعن /ر>»" مطلعة 


؛ (58ئل58 >7 خ1و1روعج ؟5) 12 
201129 مععدء امدعععءط :720920 // : (()2م2مع_لو دتزم) 041 
) 


أ ( (5225111) 22317 3_طءعع01_2و 35م > 7امطد5) 211 
و«زرع>»" موه 
: "جع />" . [ ع2 ' ] تامعد5 . "اجلع >" مطعهة 
: "جع / >" . [ ' 08366 ' ] تامع5 . "جل >" مطعهة 
: "<20 / >" . [ "عمل ' ] بامع5 . 20<7>" مطعهة 
: "<0< /><3 />حذقف< ' [10] #ام2 2104-5 وطم. ع166ع0 ' +-2ع0ط 83> | <3/>تعديل< ' [10] لامع 2100-5 وطم . عله ' -2قعط وعجلع >" مرعة 
) 
:"<ة1طوء />" مطعع 
-2 
< 01 > 


ا 0 /00967 :عا اا8 اا 
أ (جا. 0 أم جاعع]. /انانانا نالا 


أعراءهأم حاعع]©0]طأ :اتهمطع 2 /2:00967 ١/08١1‏ 


5. 


بنفس الآلية في الادخال الخاص بال1م©72 مع تعديل بسيط اسماء الأعمدة واسم قاعدة البيانات وتعديل بسيط على جدول العرض وسيكون شكل 
الصفحة كما في الصورة : 


[":) 1 0 ع 9 رامع لص أ بتاع مد تحصلق/ياءء زهىم/أدهطاوءه| 5 ١‏ 


اضافة جديد 


رواد التكنولوجيا يقيم دورة تدريبية 2014/04/29-/إ1106503 تفاصيل حول الدورة التدريبية هنا تعديل | حذق 
رواد التكنولوجيا يقيم دورة تدريبية 0368 تغاصيل حول دورة المواقع .. تعديل | حذقف 


نقوم بعمل صفحة التعديل م1م.016)© وسيكون الكود كما في الصورة : 


الجزء الأول : 


حرطح2 > 
: ("ططم. و1 ممع / . . /. . ") ععده_ع1110ع12 لين 
((['ع922صتا']5_2051) عع155) 12 


ل 

6 5104 > 5 7 

5051]6207_؟-0وعط5 7 

ع5 ]51 _ودع5036 8 

ع6 ودنع 50 9 
10 
5321 28ج 1296ع11503/ / 11 
:("10-510 لظ 'عع50 '-مع0 , ' 5086 ' -ع0366 , ' 55830 2220-١‏ 511 228735 1028115" ) ادع ناكو _لن دتمت 1نادعع 5 12 
ع 
ططم . +1206 15 125 ,25 نام 12 . 52966 0415512337 غطء ه60 6196ع220122// 14 
: ("ططم . عدع1220 :1022102" ) عع0قع5ظ 125 
1 16 
2 17 

حرطم 2 > 8 


1ن تمع 104 1290ط6ععه / / 19 
5 > 5104 20 


4 طناك 3221م 3 خظلع + 3162 355013260 04353 52166120 // 22 
: ("5104>-10 ع2ع2م 5م22 لامعع * 56128") امناو _لن تتتمدء 1 دادع 5 


نى ظر كن 


( (53111ع52) 222217ت_طءعطعع2_لن 5مك ه52 ) 211 2 
0 26 
20 ع ' ]نامع 5 > نوعطهة 27 
0 0ت ب -دحفاءت 2 
"6ه ']ناوع؟ - ععمعلن5 
1 530 
ح-2 31 
<لتغط> 32 


<1216+/>تعديل البياتات<21516>|]) ك 
<"ققت عجعج "عتم وزع "261-75115285 "55ج . 301312 “/رقتن / . . "د2عع«ط 1م 11> | 25 
<لمهعقط> 35 


م 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


51 


الجزء الثاني 


<0دعط/> 

<يا001ط> 

<”122سةة "1355-7 01> 

<3/> الرئيسية<"0طم. ه2282-1520 28> 

< /رعدط>< رع ط> 

<”"”">052 351 "52052”-2200 216 "1ه " - 2237116 هع > 
<”"2”"0-مع0عمط ع1طوةع > 43 


<2ع > 44 

<20/> العتو ان<20> 45 

46 >20< 

<لع / > <'<526202292؟ ومطعه ونطم2 > ' >7721116 "26307"-23216 "جعزت 6156-7 طاتاط 12> 47 

48 >/ 2< 

49 

50 >< 

<250/> التاريخ<50> 51 

52 >20< 

حلع /> <'<2:2ع5022 صمطعه وتطط2 > ' >731112 "ع66 237216-03 "طعرهج "08ج عنام ة> 53 

<ط<ع /> 54 

55 

<2ع> 56 

<20/> التقاصيل<2<0> 57 

58 

<0ع /> <3ع2تعجزعح /><2 :ع506 صمطعه وطن 2 ><" 7"عوبرزوج "35-2"407 زوم "066"-23116 3ع02<41:322<> |0 كك 

الحدجحوك كك 

<ع< > 61 

62 

<0ع /> <"<68:1]104"1[22_؟ مطعه «طط2 > ' >-77211146 "223216-10 "23104062"-2156 تام 20<>1> 63 

<20/><” تحديث"-721116 "ع15086ا" ->231216 " تا تننطنا5 "-2106 اتاد 50<>31> 64 

<عع /> 65 

<ع1طدع / > | نك 

<205231 / > | يك 

<01/> | نك 

<0017ط/ > | كك 

<لسعط / > لا 

وستكون صفحة التعديل كما في الصورة: 

9 +« ع خي امب 70-1 دحام أ لع /كنناع م /رو احم ل ه/اعء زهصم/أدوهطاهعءها | ١‏ 


العنوان رواد التكتولوجيا يقيم دورة تدريبية 


التاريخ '2014/04/29-/[8503ن1 


تاسمل حول «التدوو» #الكق مي هف 


0 /00967 :ع اا ١/08‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


أ جا. 0 أم حاعع]. /الانانا نالا 


نقوم الان بعمل صفحة م1[م.06166 للجدول 26175 وسيكون الكود مشابه تماما للجدول 726:20 مع تعديل بسيط وسيكون الكود : 


حيطح2 > 
221 2ه61ج26دمه 048532356 526 121110329 // 
: ("ططم. و1 دم / . . / . . ") 1211106 


1عنا تمع 3ع043 عطء 502 104 ومدععء0// 
]1 ؟ - 5104 


2351 تلتمعع لامع عطع 129عء1ع0// 
: ("10-510 عطعطه دباعم 51011 8581:5115" ) لااعندك_لن دزتسدء 1نادعع 5 


(ططم.عدع1204) 536 :041551337 626 50 1290ع6ءع<012ع2// 
( "طم . عد1220 : 120625105" ) م2630 
2 


نقوم الان بربط صفحة «رطم.101©:2 الموجودة في المجلد 26155 مع الصفحة «رطام.:106 في المجلد :1:ج وسيكون الكود بعد وضع الرابط كما في 
الصورة : 


<0017ط> 
<"27نسةة "1355 01> 
<0417/>مرحيا لك قي نوحة التحكم || رواد التكتولوجيا<"ط"-1355ت 01> 


</ عط> </ عط> 

<ة/> الأخنبار<"طلم. 120 /دتاع د" عط 32> || <3/> القائمة<"ططط. ج1220 /نتطعد" > 2عطط 2ع> 
</ ع«ط>» 

<2/> بندراء الموقع <"#"-#عخط 2> || <32/> الختدمات <"4"-2عطط ج> 


</ ع«ط></ ع«ط> 
< 01 /> 
<0017ط/> 


كما نلاحظ ربط صفحة الأخبار في سطر .١7‏ 


ننتقل الان للجدول ”زعو والخاص بالخدمات في مجلد »5 وبنفس طريقة عمل الجداول السابقة» نبدأ بعمل صفحة الادخال 7آام.)15©12 وسيكون 
الكود الخاص بها كما في الصورة: 


طم سعكسآ1 


</ "2-8 ج ناحعع وتاقطه ‏ : تغط ارععرعع "عت ررم ع رمه "152- تن تع ع ده "157-2ناوه لورعاغظ معع0ه 
<21516/>صقحة إدخال يبيياتات الخدمات<61512> 

</ "تق /عجاعج "عتم جلاع "261-51165228 "55ج . 12لشة “ردقن / . . "#قعنط 1م11> 
<مدع2/> 

<ناله0ط> 

<"2ن1نةة "-1355 01> 


<0417/> إدخال يبيياتات الخدمات <"ط"-13535ه 01> 
</ عطع</ عط>» 
<015> 
<"282051"-2122200 "ططم. 26_2206655ع 125 " -02 3661 "202-0453 /1111312326قة" >2 رزاع 2ه مع > 
در كدت > اعمواق 
</ عط><"30ع2"-231216 "اععزوج "6-27 0ع عتامم 1 > 
</ «ط> :الصورة 
</ «2ط><"وسة"”-23716 "606-7221167 5تام12> 


</ ««اط> :التقاصيل 

<3263طتزعء ج /><”407"-15ومن "77"ددو زوع "0667"-23116 22583263 > 
</ عط> 

<"حملقفظ"-731116 "6 1ننطنا5 " >-51506 115ام12> 

<طامخ /> 

<3ن / > 

<ا0ه0ط/ > 

<لمغط ل> 


ن ظر كن 


لزه 


بم يخ نيم يم يم 


ل 


0 /00967 :عا اا8 اا 
أعجا.ه أمحاعع]©0]طأ :اأهمرع 2 /2:00967 1 اا8 ١/0‏ 


ع جا. 0 أم حاعع]. /انانانا نالا 


وستكون الصفحة كما في الصورة: 


ع9 مام معكص أ //دع كن تحص لهاع زهوم/أدهطاةءه٠‏ ذا 


دخال سانات الخدمات: 


العنوان: 


الصورة: 
عاط عوممطن) ١‏ معدومطء عا5 ملا 


التفاصيل: 


صفحة عملية الادخال «رطام.ووء100م_)"اء105 : 


م 


<017ه0ط> 

<"12نةش "-12355 01> 

حرطط2 > 

: ("ططم. 22192مك / . . / . . ") 1211106 

ا 5-2102 

: ([ '2ئتق2 ' ] [ 'وسذ ' ] 5_211:55 ) عمتمدء 35ط . عع220ع5 53206 


ما 


[ 


غم نم ين شر صن 


فم قم مم قم قم قم قم 


؟ تلدع 55 
: ([ ' 2تق2 ' ] [ ' وسذ ' ] 211:15_هو) >-وم ده 
2*هع]51 ودنع 50 


6 


:" ('غعع50 ' , ' يوسده ' , ' 55820 ' ) 5 ناته (2ع06, يسة, 20ه2) 7عء35 11110 11158831 "5501-7 


((525329628 ,[ ' عتمتقط_طتتط ' ] [ ' وذ ' ] 5_211-55) ©211_ل3ع1020مطنا_رع207) 12 
1 -»" ورعك» ) 


تلقت إح 

26 4 

:"لم يتم رقع الملف ..هتاك مشكلة" مطعع 21 

28 1 

((5591,دمحى؟) تاعاعنيو_11ودتزم! ) 12 | افك 

31 1 

(2هى؟5) ممع _11ن دياه . " :لم تتم الاضاقة')ع01 32 
1 33 

:"تمت الاضاقة يتجاح" هلع | يك 

:"<2ط>" مطءء | نك 

:"<3/>عودة للرئيسية<'1206<.222/ . . '<2عطط 33>" ملءء | لك 
: (ضمج5) ع1015011_61055 ١‏ ريك 

38 2 

39 >/ 01< 

4 


7ت 


<يتقمطلر> 


لا جديد فيما تعلمناه سابقا نفس الاكواد المشروحة من قبل . نقوم الان بعمل صفحة العرض وفيها يتم عرض البيانات المدخلة في جدول 561 واضافة 
روابط التعديل والحذف. 


ا 0 /00967 :عا اا8 اا 
أع جا 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


صفحة م.1206 : 


2 نف ا 7 08 خخ «* # م؟ الداع كص حول ه/اعع زهىم/أدهطاقءها كا 
اضافقة جديد 
رواد التكنولوجيا يقيم دورة تدريبية ي ب رواد التكنولوجيا يقيم دورة تدريبية رواد التكنولوجيا يقيم دورة تدريبية تعديل | حذف 


رواد التكتولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 تعديل | حذف 


كود الصفحة «رطام.:1206 : 


5 


<3516ع2/> الغدمات<21516> 

<"ققت عجرم "تم وزع "261-51152882 "535 . 32تةشة “ردقن / . . "معط 1151> 
<2620> 

</ "152-8اتعه 25 قطه ‏ :261201 رع عرعع "عت ع تج نمه "مم5-110 2ه 0056" -115اه م 26 63 68> 
<0دعط/> 

<0017ط> 

<" 122تتنهشة "1355-7 01> 

</«ط>< /<«ط><3 /> إضاقة جديد<"ططص. 26 2262-1525 35> 

حرطحر2 > 


كم قم قم قم شم كم قم كل 
تن مات نم يم ون شر صن ١ن‏ ل 


: ”<2 3131922-62 0>-2ع20مط ١‏ 1005 '>2ع 710 ع1طوع>"” مطعهة 
:<00 5000102-35 22>" مطعهة 

:"<20/>العتوان<20>" وطعهة 

: "<20 /> انصورة<50>" مطعهع 

:"<50/>تقاصيل<50>" مطعع 

:"<20/>تعديل<250>" مطعهة 

ع"جعع/>»" مطاعهة 


م6 


هم فم زم يم ر 


9 
9[ 
1 


4 (152آ8” ع خ11روعع 5 ) 172 
23201126 ممع ععناععط :170190 // (()2م2جعء_لودتته) 013 


ذم يم يم يم 


1 


4 ( (53111ع52) 322317_طء6ع2_لن دتتم > #ام2د5) 211 
ع" <عع>" مطاعهة 
: "<20 />" . [ '20ع2 ' ] تامع5 . "جل >" مطعهة 
: "لع />" . '<"2"30ع10ه "2631026-70 ' . [ ' يتند ' ] 52051 . " / 1205 / . . / . . د52 يسذة>" . "جلع >" مرعهة 
: "<20 />" . [ "عمل ' ] ماوع 5 . "<20>” مطعهة 
: "<60 /><3 />حدق< ' [104] مام2 2310-5 وطم . 1666ه0 ' +-2عغط 83> [ <3/>تعديل:< ' [10] #امع2 10-5 وطم. 31له ' -2عطط 20<6>43>" مرعهة 
1 
ع "جة16طلةوع / >" مقطعة 
2 
<01 /> 
<017ه0ط/> 
<لسطط > 


</ عط> </ عط> 

<3/> الأخشسبا ر<" طلم . ه120 / دوعص" مط 2> [| <3/>القائمة<"ط222. 122063 /ناطع" -2ع2ط 53> 
</ عط> 

<23/> مدراء الموقع <"#"-2ع2ط 2> || <32/> الغخقددمات <"ططم. غ120 /مععو"-2ع22 32> 


</ ع«ط></ ع«ط>ه 


<01 /> 
<تيتقمط ر> 
<لمغعط/ > 


ا 0 /00967 :عا اا8 اا 
ع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.هأم حاعع]©0]طأ :اأهمرع 2 /00967 :2 ااا كلا 


ننتقل لعمل صفحة التعديل والحذف «رطام.)11)» : 
الجزء الاول : 


حطح2 > 

: ("ططم. و1غدمع / . . /. . ") ععده_ع1110 15 
(1 "226 '] 5531 _؟5) 6ع155) 12 

1 


خم يم ين ظر 


اي 


لزنا 


1 ه - 5104 
2051]6_؟ح نوعط 
'وسذ']2051_؟-وسة؟ 
2ع ه25 نم50 


ل 


مات 


فم 


1طق عطع 150833206 / / 
("104-510 181585 'عع50 '>-عع0 , ' وسذه ' >-وندآ , ' 55824 ' -2220 5181 ع5 0292115" ) تاماعناي_لن دنتست 1نادع2 5 


طلم . عمع3120 15 12 ,ع85 نام 12 . 53966 041551337 عطع ه25 190ع6ءع<012ع2// 
: ( "طم . عدع120 :1035102" ) م2630 


قم قم قم قم مم كم 
هم يم شن شر صن 


3 

2- 

حرطاط2 > 

1 ه22 104 1296طاعع©و / / 
1 ؟ه - 514 


6 


فم 


فم مم يم 
0 كا 


4 32ط1نا1ع2 قم تخطء ا طع1 355013260 04353 521661296 // 
: ("10-510 عدع2 297ع5 لوطع * 6ن5612") لاطاعناى_لن دتتمدتء 1نادع2 5 


( (53111ع52) 22217 د_طءعع1_2ن دتزتم-: ه20 ؟ ) 211 
1 


ضر كن 65 ل 


:268201 ' ]7امع5 > لوعمطه5 
: [ ' وسة ' ] تامع5 > يوسده 
'ع»ع ']ناوع؟ > ععلن؟5 


زكن كن كن كن إكن كن 7 1 
66 م 


0-11 


: 

2 

<لسمغط> 

<212516/>تعديل اليياتات<51516> 

<" 55ت /رطجزع ع "6-2 0ع "261-51155266 "55ج . 2 1تنةة // 55 / . . "5262-7 1151> 
<0دهعط> 


ن ظر كن 


ف ذن نين 


الجزء الثاني 


</ "2-8 ناتعع 5ع قط :221 ععدعع "5-2 م ج مك "0026215-15" -01117 2552-6 63> 
<0دع 2 /ر> 

<0012ط> 

<" 0122تنش "1355-7 01> 

<3/> الرئيسية<"ططم. مع 120" <2عطط 8> 

< /رعاط>< رعاط> 

<””>356102 ”20356” 7216111600 "21د ه25 " -23716 201211 > 

<"0">-مع20وط ع1طوع> 


<عع > 
<20/> العتو ان<0<> 
<لع> 
حقءح /> <'<52820:2 مطعه «ورطم2 > ' >731112 "2630"-23716 "ععدقج 5156-7 15ام12> 
<2ن /ر> 
<عع > 
<2<0:/> امتداد الصورة<2<0> 
حلحع> 
<0ح /> <"<531720229 مطعه وطرطط 2 > ' >-731116 "08667"-23716 "615 "6156-7 تنام 12> 
<عع /> 
<عع > 


<20/> التقاصيل<0<> 


<0ع /> <3ع2قعيزعح /><2 :ع506 صمطعه ورتطن2 ><" 7"حورزوعر "5-2"407 1و "ج06" - 15137116 32623 عطتناعح ><50> 
تيوت 
<عع> 
حقع /> <'<698:1]'1045[22_؟ مطعه «طرطم2 > ' -721116 "237206-10 "2ع51040"-11506ع نامرد 60<>1> 
<0/><” تحديت”-731116 "1150866"” -237116 "ا خسطناك "6106-7 تامم1><لج > 
<عج ره 
<ع1طوح /> 
<تتعامع /> 
<3ل > 
<خق هط / > 
<لشغط ل> 


ززفى إزف إآزف ١‏ 
| نر ظر ا 


6 
زه 


ا 0 /00967 :عا اا8 اا 
أع (جا. 0 أم جاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0]0©1أ :اأهممع 2 00967 :2 ااا كلا 


دنا 


وستكون كما في الصورة : 
7 © « ل هد مه 70-7 مطام] أ لع /نحع كد أحول ه/اءع زمئم/أدهطاةءه! ذا 
الرئيسية 
العنوان رواد التكنولوجيا يقيم دورة تدريبية 
امتداد الصورة |9.7م[ 
رواد التكنولوجيا يقيم دورة تدريبية رواد 
التكتولوجيا يقيم دورة تدريبية 
التفاصيل 
53 
> 


صفحة الحذف «رطام.»]»061 : 


حبطط2 > 
211 2ه2810 2226م 042638356 ه522 121110129 // 
: ("ططام . 9 121 دمن / . . / . . ") 1211106 


فز يم 


ند) كر ١‏ 


021 لم2 04363 عغطع 2ه 14 و«نتعععو // 
7 6ه - 514 


6 


321 7م22 امعء عطع 1296عه1ع0 // 
("510>-10 عجعطم ع5 22011 1515ئآ1ك" ) ادعناكو_1ن كتزتسدط 1نادع2 5 


(ططم . عدع120) 3962م 043551337 عغطء ه50 63129ءه2<2 220313 // 
: (""مطططم . عدع 120 : ه1031" ) عع 0هعظ 
2 


ننتقل للجدول 2:3 والذي سيحوي اسماء مدراء الموقع وكلمات المرور الخاص بهم وفي هذه الخطوة سننفذ نفس خطوات ال و2»00[6 والاضافة 
الجديدة هنا كيف نقوم بمقارنة كلمة المرور المدخلة مع كلمة المرور في قاعدة البيانات» ايضا ستكون كلمة المرور في قاعدة البيانات مشفرة بواسطة 


78 


خوارزمية التشفير (711(05) حيث تقوم بتشفير أي كلمة مرور من باب الحماية وعدم معرفة كلمة المرور المشفرة. 
بداية ستكون ملفات المجلد «:ؤد0 كما في الصورة: 


علاه؟ بمعلذا حن8 > طاغايها عفاد > بمووطلل؛ 


2 


512 م1 01م عغه0 عممةلا 
عام عاع ‏ #ب٠م‏ 7.15/07 متصلة لل 
لاه عا انلحم م/م دى للا 
عام عاط الاناء م لاء /ت٠ 7١15/‏ الليحاينا 77 
عام عاط نا م ء /كء /ي715 5نلاع م 77 
عنام عام 00 ا لعو 7" 

118 +منع5 منرم ١٠م‏ ظء/ه./5 7١1‏ ل 7 
218 غمنع5 منرم الب( م 715/١‏ منوما '؟" 
118 مم5 منرم الم 7+/تء/15١؟‏ غناموها :7" 


0 /00967 :عا اا8 اا 
أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


أع طا.0 آم حاععغ. نا نالا لاا 


كما في الصورة أعلاه في المجلد :01ج وضعنا صفحات (مرطم.106014 - «رطام.دزع10 - مرطام.206ة) ومهام كل صفحة كالتالي: 
صفحة «طام.:06: : صفحة الدخول وسيكون فيها فورم الدخول. 
صفحة مطام.درؤع10 : صفحة يتم فيها مقارنة كلمة المرور مع كلمة المرور في قاعدة البيانات بالإضافة للروابط لملفات وصفحات اضافة البيانات. 


صفحة ام.0114ع10 : صفحة يتم فيها تسجيل الاخروج والغاء الكوكيز وتصريح الدخول للوحة التحكم. 


صفحة «رطام.دء10 


<" 201 لطع / 1999 /ريعده . 173. 777 / / : و عط" ->220125 لسصط> 
<20هعط> 
</ "2-8 ج جنع مطقطه ‏ : تغط رع عرعج "حتت ع ع رمه "7مع15- ط تع دهن 15-27 ناوه ل ورطغط مطعم 
<1216+/>نوحة التحكم بالموقع<51516> 
</ "ققن /لعجزوع "تم رزاع "261-51155266 "53ج . 30032 “ردقه "6ط 51 11> 
<0دع2/> 
<0017ط> 
<" :251 : 2663102 6315-03 5 0357> 
<ععء ع وم > 
<21/>تسجيل الدخول<21> 
١ 353102>”100132 .2122”<‏ 20527”->11200 116 20111 > 
اسم المستخدم 
</ "عتتق لطع 115"  23116>-‏ " اعد "6106-7 تنام 12> 
</ عط> 
كلمة المرور 
</ "5020 235"-237126 "23550207"-61702 5تام12> 
</ عط> 
<ج/ر> 
</ "دخحول"-731116 "6 1ننطنا5 "-51526 نام 15> 
حمدمع /> 
<عع ع دعن > 
<01 ار> 
<تتق مط > 
<ل0متطط > 


2 
2 
2 


1 
2 
4 
5 
6 


وسيكون شكل الصفحة كما في الصورة: 
اننا عل كه وم 2 © خا < # د لصأحصله باع زه1م/أومطاهه| 5 ١‏ "0 جه » 


تسجيل الدخول 


اسم المستخدم أ 
كلمة المرور ا 


غٌ 


١/0811: 009677 0 571100‏ 
ل أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 8118 0ا 


صفحة «رطام. تزع 10 


حرطاط2 > 


: ("2عع 5203" ,"" ,"20028" , "1062120358") تأ2260م11_0ن 5 تتسمسححرمت 5 

: ("12ضةت 58011 * 51:51" ,دمت 5 ) لاععناكى_11وقتتط > 15نادع52 

: (53111ع52) 17ة322_طءعع11_2ودتتم > #اممد5 

٠. . ..‏ 115818 15 28011 51158510 1231 لاتقط 1115 لمومم امن / / 

( 2550201" ]م5 >> (["2355020"] 5_2051) 7005 غغع [' 23202 ' ]1ه 5 -- [ " 115621213706" ] '5_2051) 112 
1 


فم يخم زر ظرم صن 656 ل 6 قا 


. . . لأكل 1511118 لاظالقا!1 1151518 111 10 0001515 1115 581 / / 
: (3600+ () عسدء ,"5ظلا" ,"210060ع 15" ) 011م650 5 


فم 
[- 


1 
ع5 
1 


فر 
فر 


كنا 


فم 
دن 


: ("ططم. عم1206 :102616052" ) م5630 


فم مم 
0 


1 
: (همى؟) ع411_6105 2175 


فم 
5 ل 


-2 
< "متخ طعد / 1999 / ع0 . 13 مالم / / : وزع "20125 للسعط> 
<0هعط> 
</ "2-8 6 1اتعع 25 قط :25201 /لععدمج "5625-7 همه "0026625-1156 ”0111-7 2552-6 20653> 
</ "نتن عامج "عم وتع "م8 مع 511 2861-7 "535 . 112نتلة “ردقه "عط 13151> 
<21216/> الدخول للصقحة<21516> 
<مدعط > 
<0017ط> 
<”12منةق "1355-7 01> 
<017/>مرحيا لك قي لوحة التحكم || رواد التكتولوجيا<"ظ8"-1323535ه 01> 
</ عط> </ طط> 
<3 /> الأخغسبا ر<" طلم . ه120 / د تعد" 2 عط 2> || <3/>القائهمة<"طط7. 121063 /ناطعمم" - 2812 53> 
</ عط> 
<3/> مدراء الموقع <"#"-2ع2ط 32> [| <32/> الختددمات <"«ططم.عمع120 معو "عط > 
</ عط>»</ عط> 
<3/> تسحجيل الخروج <"522. 22672-10901165 38> 
< 01 > 
< 03 /> 


© 


3 
3 


ف ا 4 م 
نم نم زن ظر كن 


<017 0ط / > 
في سطر ” الى ه عملية اتصال مع قاعدة البيانات وعملية استعلام واخراج بيانات الجدول (2012111) في سطر 7 قمنا بعمل شرط (1) وداخل الشرط 


قمنا بعمل استيراد اسم المستخدم من خلال دالة '85_20571 وهي كما في الكود ( [''5_2005111567112116 ) وقمنا بمقارنتها باسم المستخدم في 
قاعدة البيانات (['97077]'0226) ثم اضفنا شرط آخر بواسطة (و) وهي (42يد) وتعني ((427/1) . 


في قاعدة البيانات الباسورد مخزنة بشكل مشفر بواسطة الدالة (711(5) الى الان لم نقم بعملية ادخال الباسورد وكلمة المرور وسنقوم بإضافتها لاحقا . 
بعد الشرط الاول نأتي للشرط الثاني نقوم بتشفير كلمة المرور التي ادخلها المستخدم ونقارنها بكلمة المرور المشفرة كما في الكود 
(['9551901:0م']91075 -ت (['9551901:0م'']205)5_20051) حيث الكود (['7205)5_1<051]'025513101:0 ) تقوم بتشفير كلمة المرور 
المدخلة من المستخدم ثم مقارنتها اذا كانت تساوي (--) كلمة المرور في قاعدة البيانات للمستخدم (['91017]'0255557010 ). 


في حالة كانت عملية الادخال ووافق الشرط وكانت كلمة المرور واسم المستخدم موجود في قاعدة البيانات سيتم الدخول في سطر ٠١‏ وهو القيام بتعيين 
كوكيز وبنفس الطريقة التي تعلمناها مسبقا والاستمرار في الكود وظهور روابط صفحات الادخال. في حالة عدم التوافق مع الشرط يتم الدخول للسطر 
؛ ١‏ وسيتم توجيهه مرة اخرى لتسجيل الدخول في صفحة («طم.:©ع6201. 


١/0811: 009677 0 5700‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


صفحة بردام.)نامع10 


<20ههط> 

</ "52-8 1تعع 5 قط :7ط عجعج "حتت ع ع مه "5-175 2ع 2ه" -115اوه -2 6 25 6م18 
</ "وق عجرو "عت وياع "65ع 261-75315528 "55ج . 3070332 “ردقن "-12 526 13121> 
<81816/>تم تسجيل الخروج<21516> 

<مدع2 > 

<0017ط> 

<3ق هط /ل> 

<لممتغعط > 


حرطط2 > 1 

: (3600 - ()122ع , '210' , "1556210060 ' ) 01216مع65 5 2 
: ("ططم. عدع3120 :10263102" ) م2630 3 

4 2- 

< "لتقت تعد / 1999 روع<ه . 113. انماما / / : وععط">-25لتهعد لسصطء> 5 

6 


كما في الصورة أعلاه في صفحة (10801114.017) يتم تسجيل الخروج عن طريقها وكما نلاحظ في سطر " الغاء الكوكيز والتي تعلمناها مسبقا. 


اضافة مستخدم وتشفير كلمة المرور 
من خلال 2ز:)1232دم ام ندخل لقاعدة البيانات التي نعمل عليها ]1060م ثم الدخول للجدول :1:ج كما في الصورة: 


جع 9# علو ببق منحملددعاطمنيقعع زمءم - طال7مطام.اوك:4- اع ناذ الام 3071#ع2ع2673ع6609568989 1234705 - مععاه7 ممع ل لماه تحمل فحصم ام /أومطاقها ذ ١‏ © جه © 


متنملت 58 د غععرمعم © « غدمطادعوا لع أحررك في ]لاامام 
95و11 362 | كومنويعم0 فق إزممها +ك] ‏ رمم»ع بهن | غيعكما غ6 طعبهه5 ذا 50 (لغ ‏ عسعنص5 تمل عوسرم,ق8 0 © © © 4 1ه جى 
ا ؟ ... (قعا36؛ أمعععم) | 


1 مهم برط دعدو36غول ,عغاة 


'0أملد - المع |؟ 2|>>> 
0 , 0 111111 2 1 59 
ممم و 
مك ] [ تفع ] [ عملما] ومناقمم 0 ١‏ و 
102 8 
. "93 
من خلال الصورة أعلاه نقوم بالضغط على (1225610) او باللغة العربية (ادخال) وسيتم الادخال كما في الصورة: 
لت 158 د غععرمعم © « غدمطادعو| زع 0 ري آلاأممام 
11915 32 | كوونوهيهم0 2ق أرممها كا 4أمم»«ع كنا | غعوما 36 | طعمهع5 ذا له5 لغ وسعنصك ثم ووسم,م8 إ) © 55 © 4 0ه جى 
عناهلا انلز ممتاع سطع عمنا1 مصسامء 7 ... (قعاطة أمععهه) ْ 
١‏ ' 3 (10:)3 10 
ا 
0 ْ 8 ِْ (88)دطعو عمقم 1 03002 زط 03630355 ,غ1 
و ٍْ ؟ 2 ْ > >> 
2 ل روج 
٠6 9‏ وع 
حح 8 2 
ود ١2‏ وض 
ا اما | 5 


من خلال الصورة أعلاه قمنا بإضافة اسم المستخدم او مدير الموقع كما في الصورة (2)1:2) ثم اضافة كلمة المرور )١7(‏ ولكن لاحظ قمنا باختيار 
نوعها (71105) وسيتم تحويل كلمة المرور )١١7(‏ الى كلمة مشفرة في قاعدة البيانات » بعد القيام بضغط الزر (0©) يتم التنفيذ وسيكون شكل اسم 
المستخدم وكلمة المرور كما في الصورة: 


0 0 /00967 :ع |8 ١/0‏ 
١ 000‏ أع .0 أم حاعع]©10أ :المع 2 00967 :2 عااا8 ولا 


505 


5 + 
3/010ا355م 2313 لز > ه ا له 


0 ا) 1١30001‏ غأعاء0 © امم نل 6ألع خض 


ممع لع عاعاء0 © عوموطن قي :#عاعداعد نايا الك عاعع!0) +4 


01//5] 10 عع 5مع0جع ا 0 :تلام أ0 ععطصسلا 0 -الام؟ 51306 : الاملاك 


كما نلاحظ في الصورة أعلاه تم تشفير كلمة المرور وظهرت كما في الصورة في العمود (025515010). 


نقوم الان بتجربة الدخول بكلمة مرور خاطنة وكلمة مرور صحيحة. بعد التجربة سنلاحظ عدم ادخالنا للوحة التحكم بإدخال كلمة مرور خاطئة وعند 
ادخال الكمة مرور صحيحة سيتم اظهار روابط صفحات الادخال كما في الصورة: 


امب محام.صأوها/رص احص له //عع زه:م/أدوهاقءه٠‏ ذا 
مرحيا لك قى لوحة التحكم || رواد التكنولوجيا 


القائمهة || الأخيا 
الخدمات_| | مدراء الموقع 


تسحدا. الخروج 


الى هنا قمنا بعمل تأمين للوحة التحكم الرئيسية اعلاه؛ نأتي الان الى تأمين جميع الصفحات في المجلدات الموجودة ضمن المجلد (2)::112) ونعني بذلك 
صفحات الادخال والاخراج والتعديل والحذف لكل المجلدات (القائمة - الخدمات - الأخبار ). 


سيتم اضافة كود الكوكيز لجميع الصفحات كما في الصورة : 


حتطاحز2 > 

4(" 5ظل' -! ['04ع2100<ع55' ] 5_6001611) 112 
: ("ططم. عده 120 / . . : 1050361602" ) ععلوعط 
) 


كما نلاحظ اعلاه قمنا بإضافة كود الكوكيز لاحد صفحات الادخال وذلك في الاسطر الأولى وهو عبارة عن شرط والذي يعني في حالة كانت قيمة الكوكيز 
الذي اسميناه (0»©ع19»1108]) لا تساوي (57105) يتم التوجه مباشرة الى صفحة الدخول (1[7م.<:1206) الموجودة ضمن المجلد 20:1. ولابد من 
اضافة هذا الكود لجميع الصفحات حتى تكون محمية ولا يتم الوصول لها الا اذا كان المستخدم قد ادخال كلمة المرور كاملة. 


ننتقل الآن لتجهيز الصفحة الرئيسية للموقع والخطوة الآن ملئ الجداول بالبيانات وبعدها سنقوم بالخطوة التالية وهي باستيراد البيانات من قاعدة 
البيانات الى الصفحة الرئيسية بشكل ديناميكي. نقوم الآن بملئ الجدول الخاص بالخدمات (5615) والجزء الذي سيقوم بعرض هذه الخدمات هو كما في 
الصورة : 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأم داءعع]©0)مز :انمع 2 772755202 2:00967 8|118 0لا 


تصميم وإستضافة مواقع إلكترونية 


تصميم واستضافة مواقع الكترونية 
وتركيب انظمة اذارة محتوى تصميم 
واستضافة مواقع الكترونية وتركيب انظمة. 
اذارة محتوى تصميم واستضافة مواقع 


قسم تصميم الجرافكس 


تصاميم رواد التكتولوجيا قسم تصميم 
الجرافكس قسم تصميم الحرافكس 
الجرافكس قسم تصميم الجرافكس 
قسم تصميم الجرافكس قسم تصميم 
الجرافكس 


من ضمن خدمات رواد التكنولوجيا صيانة 
الحاسوب وتركيب الشيكات للمؤسسات 
والمراكز بمختلف توجهاتها من ضمن 
خدمات رواد التكنولوجيا 


تقاصيل أكثر. 


سنجعل الجزء أعلاه يستورد البيانات من الجدول 8017 وهنا لابد ان تكون الخدمات الرئيسية " فقط حسب بنائنا للموقع وتخطيطنا المسبق بالإضافة 
للصور ويتم الغاء الصور اعلاه والبيانات لأنها افتراضية الى ان يتم الربط مع قاعدة البيانات. وبعد ملئ الجدول 1ه بالبيانات والصور ستظهر 


البيانات التي في الصورة: 
2 ها ف 5< 2 © خخ <« ## د 


تفاصيل 


تقوم رواد التكنولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات 
خدمية أو حكومية او منظمات أهلية ومجتمعية وفقا لأحدث التصاميم العالمية والأنيقة. واستضاهه | حذف 


من الخدمات الراقية والجميلة التي نقدمها تصاميم لجمبع وسائل الدعاية والإعلان,فريق محترف 2 تعديل 
وخيرة عالية في التصاميم الورقية والمطبوعات بأنوعها بالاضافة إلى ذوق التصميم الجميلة والجذابة | حذف 


! ) نصمم شيكات بأحدت التقنيات وبكل احترافية ونقدم خدمات الصيانة للحاسيات والشبكات بأنواعها تعديل 
© للمؤسسات والشركات والأشخاص. 


/الاع 1/5 باع زه1م/أومطاةها 5 | © ج » 


نربط الجدول الخاص بالخدمات مع الجزء الذي حددناه مسبقا وهو الجزء الموجود في 1206.017 الرئيسية وسنقوم بعمل استيراد البيانات المطلوبة 


الى هذا الجزء بشكل أتوماتيكي. 


سنحذف ؟ من الأجزاء ونكتفي بواحد فقط ونجعله ضمن الدالة ©7711 وسيتكرر بعدد الخدمات التي قدمناها وهي " خدمات ويجب ان لا تزيد عن ” 


وسيكون شكل الكود بعد الحذف للجزئين كما في الصورة: 


١/0811: 009677 0 550000‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع ‏ 772755202 2:00967 08118 


ل 


<"02104و">-10 "210_5و"-13255ه 01> 
<23/>خدماتتنا<23ط> 
< "210و"-13255ه 03> 
<"2:7ع9511"-1355ه 01337> 
<3 / ><" 6-1237336 11020 " -6 5151 "329 . 045-17064 0123 /5 171206 //رطء" 52-2 1700><" 329 . 65/0121045-17094 175020 /لطة؟"-2ععط > 
< 01 /> 
<23/>صياتة حاسوب وتركيب شبكات<23> 
<"م_10دو "1355 01> 
<م> 
من ضعن خدمات رواد التكتولوجِيا صياتة الحاسوب وتركيب الشبكات للعؤسسات والمراكز يمخغتلف توجهاتها 
من ضمن خدمات رواد التكتولوجيا 


© ا ب 


لك 
© مات 


لك ل 


5 
فر يم زن شر كن 


لب 
جه د م 


م 


ب لب تهت م ممع 


<ه/> 0 
<2/>.. تقاصيل أكثر<"28201. 22115ع06"-2 م 2ط "2ط_02104 5902 2م06طناط"-1355ه 38> 0 
< 01 /> 2 
<017 / > 53 
64 
55 
</ عط> 866 
<01 /> 67 
<-- نتهاية محتوى الموقع --!>]| تك 
89 


لاحظ من سطر 7١‏ هو الجزء الذي سنعمل عليه. وسنبدأ بعمل اتصال لقاعدة البيانات ثم الاستعلام وبعده ننتقل لاستبدال العناصر او العناوين التجريبية 
فمثلا في سطر"" هذا رابط للصورة التجريبية سيتم حذفه كاملا واستبداله بكود استيراد الصورة من قاعدة البيانات(ع121)»: ايضا في سطر 7٠6‏ 
سنستبدل العنوان بعنوان الخدمة من قاعدة البيانات (12620) ءما بين السطرين 7 و 7٠١‏ سنضع كود استدعاء التفاصيل (064). سطر 7١‏ (تفاصيل 
أكثر) سنعمل عليه لاحقا. في نهاية التعديل والاستبدال ووضع الكود المناسب سيكون شكل الكود كما في الصورة: 


حجرّء الثاتي من المحتوى 


<23/>خدماتتا<23> 


: ("ططم. و21 مه" ) 1211106 حيطح2 > 
"256 10 -لا8 08058 بعد 58011 * 581:01" ) تلاعاعناكو_لن دتتمد 1نادعع 5 


2 
<" :31150 2612:0ق2 :400512 : طع 511-10 ع1طوج > 
<عع> 
<2 311125((14ع52) 322317_طء2ع2_لو ولتم > 7م52 ) 2311 صريطم2 > 
<20> 
<"10ع2نو"-1355 03> 
<"ناتعع0311"-1355ه 01> 
<2 126'[2' ]520177 . " /5 52-1216 37>" قطعه ترتطاط2 > 
<01 > 
<قط/»<2 : ['20ع ' ] امعد مطعع حرطحر2 ><3ط> 
<"مط_10ع2و"-13535ه 01> 3 
<م> 5 
2 “2ع ']7ه520 مطعهة حريطم2 > 55 
<«م/> 56 
<8/>.. تقاصيل أكثر<"1غط. 115هععل "معط "82عط_01210و 2هوط 2م26 2تاط"-1355ه 58> 57 
<01 /> 58 
<017 > 59 
60 
<0< /> 61 
62 
<2 ( دحيطم2 > 63 
<ع1طوع /><ج2ع / > | يك 
<> 01 /> | تك 
</ عط></ ع«ط> | تك 
<-- تهاية مفختوى الموقع --!» 67 


لا جديد في الكود سوى دمجه مع كود [00غط في سطر ١‏ ؛ كود الاتصال بقاعدة البيانات. في سطر ؟ ؛ كود الاستعلام للجدول الذي نريد عرض بياناته » 
أغلقنا الكود في ”4. في سطر ؛ ؛ بدأنا عمل جدول والغرض منه لجعل اجزاء عرض البيانات تظهر بشكل أفقي كل جزء داخل خليه (60) ضمن الجدول 
ايضا قمنا بعمل ستايل مختصر بدون كلاس لتحديد المساحة الجانبية («زع2) من الجوانب تكون اتوماتيكية ومن الأعلى والاسفل تكون صفر 
بالإضافة إلى العرض تم تحديد 4٠٠‏ بكسل. 


١/08١1: 00967 0‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 ا اا8 0لا 


أع لاه آم جحاععغ. انا نالا ناا 


انا 


في سطره ؛ بدأنا بعمل صف. سطر 45 فتحنا كود وقمنا بكتابة الدالة 771116 واستدعينا الاستعلام الى داخل المتغير 12018 واغلقنا الكود ايضا في نفس 
السطرء في سطر 417 بدأنا عمل خلية» سطر 48 بدأنا بعمل الكلاس 


وسيكون شكل الموقع كما في الصورة: 


٠‏ احتراقية ونقدم خدمات الصيانة للحاسيات 
ولع والشبكات بأنواعها للمؤسسات والشركات 
والأشخاص. 


من الخدمات الراقية والجميلة التي نقدمها 
تصاميم لجمبع وسائل الدعاية 
والإعلان,قريق محترق وخيرة عالية في 
التصاميم الورقية والمطبوعات بأنوعها 
بالاضافة إلى ذوق التصميم الحميلة 
والجداية 


تصاميم مواقه الكترونية 
تصاميم مواقع الكترونية 


الالكترونية الرسمية بأنواعها سواء كانت 
تجارية أو مؤسسات خدمية أو حكومية او 
منظمات أفلية ومجتمعية وفقا لأحدث 


سنقوم بعمل اضافة جديد للبيانات أعلاه وهو القيام بعمل دالة تقوم باستيراد جزء من التفاصيل فقط وليس كلها وذلك عن طريق دالة 0اوداناة 
وصورتها العامة: 


(1:2 1,1211121 1211111ر)ءدة])) “لأوطاناد 


والصورة العامة توضح ان هذه الدالة تقوم بعملية اخراج عدد معين من الوغ)3 أو الحروف حيث يرمز ]2زم الى المتغير الذي يحمل النص الذي نريد 
تحديد مقدار ما يظهر منه.وع 21نم ويشير الى رقم الحرف في النص الذي سنبدأ منهء 612 ددم هو عدد الوغ)ؤم المسموحة او التي نريدها. 
وسنقوم بتركيب الكود في السطر الخاص بالتفاصيل غع1 كما في الصورة: 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 ااانا 


أعاءهأم حاعع]©0]أ :اتهمطع 


أع جا. 0 أم حاعع]. /الانانا نالا 


<3ط/>خدماتتا<23> 39 

40 

: ("ططم. و21 جم" ) 1211106 صتطم2 > 41 

"0 14 لا8 0812158 وعاء5 58011 * 511:01" ) بااعناي_1ن دتزمدت 1نادععا 5 42 
2 43 

<" :31150 0: 208260312 :1م400 : طع 5116-5310 16طوج > ا 

<2ع> 45 

<2 31112((14ع522) 322317_طءطع1_2و دتتمط > 2017د5) 211 حيطم2 > 46 

3 >20< 


نك مم 


<2: [ "عع ' ] لامعد؟ تع عرعج 5 صرطح2 > 


ره 


<"9210">-1355ه 01> 


561 


<"ب27ع911"--1355ه 01337> - 

<2 120'[2 '] نامع ؟ . " / 52-1165 12>" مطعءعهة ترطم2 > 52 
<ت03 /> 53 

<3ط/><2 :['20ع ' ] امعد مطععة حيطد 2 عد3قط> 54 
<"م_10عو"-1355ه 01> 55 

حم> 56 

2 :"..". (0,222,طتاع6؟) 2ع قطتاكة مطعك صيطم2 > 57 
<«/> 58 

<3/>. . تقاصيل أكثر<"221. 2115عع0 "2 عط "82ط_1210و 2و5 2م60 طتاط"-13255ه 58> 59 
<01 /> فك 

61 >/ 01< 

62 

حقء /> 63 

64 

<2 ( حرطط2 > 65 

<ع1طوع / ><<خ / > 66 

67 >/ 01 < 

</ عط>ع</ «اط> | دكن 

<-- تهاية محتوى الموقع --!>[0 كن 


الزيادة التي قمنا بعملها أو تعديلها هي سطرين فقطء في سطر؛ ؛ اضفنا كود وعرفنا متغير جديد)جء)8 ووضعنا بداخله بيانات التفاصيل(]16). وسيتم 
وضع البيانات فيها في كل مرة لكل سجل. في سطر7ه قمنا بتطبيق الدالة ()5185461 وادخلنا المتغير الذي سيحوي النص او التفاصيل )ه)؟ ثم حددنا 
صفر وهو ان يبدأ من الصفر ثم حدد ١١‏ ؟ بت مقدار ما سيقوم بإخراجه من البيانات الخاص بالتفاصيل وأما النقطتين التي بين علامتي التنصيص نشير 
الى ان هناك تفاصيل اخرى. وسيكون شكله بعد التطبيق كما في الصورة: 


جرافكس وتصاميم تصاميم مواقع الكترونية 


من الخدمات الراقية والجميلة التي نقدمها تقوم رواد التكنولوجيا بتصميم المواقع 
احترافية ونقدم خدمات الصيانة للحاسبات تصاميم لجمبع وسائل الدعاية الالكترونية الرسمية بأنواعها سواء كانت 
والشبكات بأنواعها للمؤسسات والشركات والإعلان,فريق محترف وخيرة عالية في تجارية أو مؤسسات خدمية أو حكومية او 


قن فده الخطوة تقوم يعمل اللازع لرايظ الأزرق وهو حقد الشغط عليه سيقو يعركن التفاضيل كاملة وهي الطواة والتفاضيل وسيكرجب ظلينا عم 
فحة تقوم بهذه الوظيفة وسنقوم بعملها وسنسميها م[1م.06»)_5617 داخل المجلد العام وهو اسم مختصر لتفاصيل الخدمات. وسيكون الكود الخاص 
بها كما في الصورة: 


١/0811: 009677 0 00‏ 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


<2 :('صطم. 120621 ' ) 1211106 صيطام2 > 
<"26ع 6 2م "1355-7 01> 


<0417/>هتا العتوان<017> 
<017/>هتا التقاصيل<037> 


3 


> 015< 


من م < 


فم 


<2 :('مصطم. 120612 ' ) 1211106 طتطم2 > 


فم 


فر 


كما نلاحظ أعلاه سطر ١‏ استدعينا الجزء الأول من الموقع في سطر " قمنا بعمل ديف واستدعينا الكلاس 2014614 والسطر 5-5 قمنا بعمل ؟"ديفات 
للعنوان والتفاصيل في سطر ٠١‏ استدعينا الجزء السفلي للموقع. وسيكون الشكل كما في الصورة: 


24 
:ه281 03 
: #222 :عملاهم» 
:6212 ,117065 ,"2802122 م121 13171065" :117 1تتةع -25025 
: 2025-5126 
025 2025-61 
:2 11235 م11 :م19 : و 2520032 
:200 «ام1 عنص1 :7م شطد-عيروع 
: 4593 : 102م» -0 تامع وعاء قط 
1 222012:0 
: م50 -1212 108212031 
:م1 4222 551134 :عع عمط 
:م م4 عدم4 م4 : 2062-252013115م0ط 
4 :اطع 1 


تتاءءة 
:011262102 
: #22 :عم1هم» 
:21 ,11765 ,"22ه8 ه121 1317065" :117 1تتة 2025-2 
: 2025-5126 
1025 120225-16 
:2 11235 م11 م19 : 2300129 
20 م1 عتمص1 :7م00 هطد- جروج 
222012:0 
: م50 -2082121121 
:م1 4222 551134 :عع عمط 
:م4 م4 عدم4 عزم4 : 2062-252013115م0طظ 
للل ت اء باع من 


5 
1 1 5 
4 آز6 


فم فم ف 


وبعد الاستدعاء للكلاسات وربطها سيكون شكل الصفحة كما في الصورة: 


0 /00967 :ع |ا8 ١/0‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


أع جا. 0 أم جاعع]. /انانانا نالا 


ندا 


نقوم الان بعمل الكود اللازم في رابط (تفاصيل أكثر) في صفحة 17م.:1006 ونربطه بالصفحة «و[م.5»77_غع0 كما في الصورة : 


-2 :"..". (0,222,طتاع55) 2ع 5طتاك مطعهة حيطد2 > 57 

<«م/ > 58 

<2 "<ه/>. . تقاصيل أكثر<'2غط_2104و 2 602 6 تاط ' >-1855 ' [10] امع 2100-5 مطم . باعع3ع_ععل ' دعم طط >" مطعء حرطح2 > 59 
<03 /> 60 

61 >/ 01< 


كما نلاحظ تم ربط الرابط بالصفحة 1م.066_56©17 وسيتم ارسال ال10 الخاص بأي خدمة للصفحة 1م.6©17و_]06 والتي تقوم بدورها بأخذ الرقم 
والاستعلام عن الخدمة التي طلبنا التفاصيل عنها واخراجها من قاعدة البيانات وعرضها كاملة. ونأتي الآن لعمل الكود اللازم لذلك. 


سيكون شكل الكود في [م.06)_5©17 كما في الصورة: 


<2 :('صطم. 120621 ' ) 121110 حرطم > 


<" 0ع تن نمه "1355-7 03> 
حرطاح2 > 
: ("ططم . 219 دمن " ) 1211106 


17 ه؟ - 514 
1ه عطع 126هع11503/ / 


فم يخ زن شرم صن 66 ل 66 


ما 


: ("10-510 معطم ع5 متمطع * ا8م5612") لالاعناكي_لن دنتست 1نادعع 5 


<2<>/037 :20عظ55 مطعع حرطم2 >< "20ع5"-1355 03> 
<01 /»<2 : عع50 مطعهء دحريطط2 >< "1355-06 01> 


0 
خا : 
( (5111ع52) 322317ت_طعطع2_لن د يرزمكت ه20 ؟ ) 1211 2 
1 3 
"5820 ' ]تاوع؟ > نوعط 4 
“غم ']وع؟ > حجعمله5 5 
1 6 
-2 7 
9 


>/ 01< 


هم فم قم قم قم قم فم فم يم يم نِم يم 


ت خز يم ين 


<2 :('ططم. 120612 ' ) 121110 خبطم 2 > 


بعد الضغط على اي من (تفاصيل أكثر..) الخاص بالخدمات ستظهر كما في الصورة: 


بو مام اسطآمت 


الرئيسية 


جراغكس وتصاميم 


الراك ران كاه الت ورا تتا تلت رسائك الاحاياة ر ال حا قري متر نا رخيرة عائية فى التشارف الررقة ران كبر عات بأتر حرا بارخ اناء إل زرك 
مسحل الشسله زاتكراتك 


لم نقم بعمل استيراد للصورة ويمكننا اذا اردنا ذلك بعمل ديف خاص بها وبنفس الية العنوان والتفاصيل مع زيادة امتداد الصورة او مكانها في المجلد 
(/وع2دة) بدون سلاش ونقطتين بخلاف السابق لأن الصفحة والمجلد في نفس المكان. 


ننتقل الآن إلى القائمة وجعلها تستورد البيانات من قاعدة البيانات وبنفس طريقة الخدمات بفارق بسيط . سيكون التعديل على صفحة «رطم.1206:)1 
وال توجد فيها القائنة وستقوع باستدطاء الكدوق :الخاض بالقاننة وريطه بالصقتطة واكام الرديسية) ‏ وقق كل شيع تقوم يمان ينات القافنة 
حسب القائمة الموجودة مسبقا لدينا وبالترتيب كما في الصورة: 


0 0 /00967 :ع اا ١/08‏ 
0 : أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


<--هقا ا يداية القاكئمة--!> 21 

: ("صططم. و 1قغدمء") 121110 «رطم2 > 22 

("256 10 لا8 08258 بتصعم 58011 * 551:501") لااعني_لن درمتت 1نادعع 5 23 
2 24 

25 

26 

<"ناطع"->1355 01> 27 

28 >111< 

<3<>/11 /> الرئيسية<"22م. 222-1203 131<>3> | كنت 

30 

<2 31112((14ع52) 22217ت_طءعع1_2نودتزم > 52017 ) 231 «صرطم2> 31 

32 

<13/><ة/><2 : [ "2830 ' ] تامع مطعهة تحرطت2 ><" "22ععط 11<>3> 33 
34 

<2 ( حرطم2 > 0 

36 

37 >/111< 

38 >/ 013< 

<--هنا تهاية القائهمة--!> 39 


في سطر 74-775 قمنا بعمل اتصال واستيراد لجدول القائمة من قاعدة البيانات .سطر ”١‏ وبعد الرئيسية قمنا بعمل دالة »771111 وستقوم بسرد جميع 
العناوين للقائمة (2620) . سطر 7” حذفنا جميع العناصر في القائمة باستثناء أحدها واستبدلنا العنوان بكود اخراج للعناوين وستقوم الدالة 116نط؟ 
بذلك وتمر على جميع العناوين للقائمة حسب السطر ””. ونلاحظ عدم وجود رابط وهنا نقوم بعمل اللازم لذلك ونريد صفحة للتفاصيل خاصة بالقائمة 
كي نقوم بتحويل المتصفح بعد الضغط على اي عنوان للقائمة. سنسمي الصفحة [1م.22©11_غ06 وهي اختصار لتفاصيل القائمة. وهي مشابهة تماما 
لصفحة م1م.066_5677 مع تعديل بسيط وسيكون الكود الخاص بها كما في الصورة: 


صفحة ودام 1 عدر_)ء0 : 


<2 :('م0طم. 120611 ' ) 1211106 حتطح 2 > 


<"”225626م "1355-7 01> 
حرطح2 > 
: ("ططم . 219 مت " ) 3121110 


غم نزخ زر) كير (ر) 6١‏ ل- 


72 ؟ - 510 
231 عطع 12534131296 / / 


تت ف 


زف 


: ("510>-10 مدع تالطعم 22011 * 51" ) باع ناكو _لن 75متط 1نادع2 5 


شز يم 


( (5111ع52) 322217_طءطع2_لن دنتست ه20 ؟ ) 211 
0 

:28201 ' ] 7امعد؟ > لدعطه 

'غمع7]'0ه2 5 > ععله5 


نه ظر كان 


1 

2 

<017 /ر>»<2 :عط مطعع ترطحز2 ><" لدعط"-13535 03> 
<2<>/017 : خع50 مطءء حرطن2 >< "عع1355-7"0 03> 


لك هم 


تم 6 


>/ 01< 


ا 
|: 
1 
1 
1 
1 
16 
17 
: 
: 
2 
2 


هم نَم ين 


<2 :('صطم . 1206122 ' ) 1211106 طنط« > 


كما نلاحظ نفس التشابه تم تعديل فقط اسم الجدول إلى 7161311 في سطر .٠١‏ نقوم الان بالرجوع الى روابط القوائم ونقوم بإضافة الرابط لكل عنصر في 
القائمة حسب الكود: 


١/0811: 009677 0 50000‏ 
لام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


1 ) 1211106 
) لالاعناكي_ل1ن تتتمدط دادع 5 


<"ناطع”"-1355 01> 
<111> 
<3<>/11 /> الرئيسية<"ططم. 2262-1520 131<>3> 


4 ( (5225111) 322217_طءطع1_2ن5تتم > #امط5) 211 


ّ) 
<11 /><3 / > 12 5207 مطعهة 
وسيكون شكل القائمه كما في الصورة :. 
] 1 
8 “"8>ح4غ5142ش 1 
ري مس ممم در سرادت ابر انبر مره تبر 


ننتقل للجزء السفلي والموجود فيه (آخر الأخبار) كما في الصورة : 


رواد ال 


الموا 


: 31700.6011/© أناكثالا_مع 
1111000 
| الا 


رمضان الميارك 


أع .0 آم حاعع]. انا لانالانا 


مطعءع <11> 


>/111< 
>/ 01 < 


إكن اك اك اك اكز كنا 
خم يم زن ير كن 


لزنا 


هت م 


ات در 


2 
3 
3 


ون 


نن) ش) تن 


ند) شر ا 66 ل- 


ذ) ن) ذن 


© ما 


سنقوم أولا بملئ الجدول 76175 بالأخبار كما في الصورة : 


2 هاده 5< >2 © خخ * 4 د 


اضافة جديد 
العنوان التاريخ تفاصيل, تعديل 
5 ! 6 أقام رواد التكنولوجيا دروة تدريبية في مجال تصميم المواقع الالكترونية واستضافتها لمجموعة تعديل 
وواة الع واوجيا نقيم ذو تدرينية 700007 1 من العتدرزين في فجاك الورب. وقام كل فتدرب يعمل مشروفة الخاض وض مك اكوم | لق 
رواد التكنولوجيا تفتتح قسم تصاميم جمرومب رم تعتزم رواد التكنولوجيا افتتاح قسم تصاميم الجرافكس والذي يقوم بتنفيذ جميع المهام تعديل 
الجرافكس في نهاية مايو الحالي المتخصصة في التصاميم والطياعة. | حذق 
9 8 206 أقام رواد التكنولوجيا دروة تدريبية في مجال تصميم المواقع الالكترونية واستضافتها لمجموعة تعديا 
رباد التخولويتها بقيم جورة تقريية 2 من المتدربين في مجال الويب. وقام كل متدرب بعمل مشروعه الخاص. | حذفق 
رواد التكنولوجيا تفتتح قسم تصاميم جمرو ب زمر تعتزم رواد التكنولوجيا افتتاح قسم تصاميم الجرافكس والذي يقوم بتنفيذ جمبع المهام تعديل 
الحرافكس في نهاية مايو الحالي المتخصصة في التصاميم والطباعة. | حذقف 
رواد التكتولوجيا تهنئ الأمة العربية جورومرم رمح رواد التكنولوجيا تهنئ الأمة العربية والاسلامية بمناسية شهر رمضان المبارك, اعادة الله علينا تعديل 
والاسلامية بمناسية شهر رمضان المبارك ولكم باليمن واليركات. | حذق 
عرض خاص من رواد التكتولوجيا 2 عرض خاص من رواد التكنولوجيا , عرض خاص من رواد التكنولوجياعرض خاص من رواد التكنولوجيا ا 


/كالء0/أ010ة اع زه م/أدمطاهها 5 | "© ج- -» 


سنعدل الان على الصفحة مطم.1206<2 ونقوم باستيراد الجدول (الأخبار) من قاعدة البيانات كما في الصورة: 


<3<>/11/>رواد التكتولوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية <"+ة4"-2عطةط 11<>32> 


<" ونع "1355 017> 
<+01/> آخر ١‏ لأحبا ر<"528501122">-1355ه 017> 


: ("ططم. و 21دمه " ) 1211106 «صرتطم2 > 
"255 14 لا8 08058 وبتاعم 58011 * 101:آ511") لاطاعناى_1ن دتزمدح 1نادعع 5 
2 

>111< 

<2 31115((4ع52) 322217_طءعع1_2و5قم > #امعد؟) 31طم حرطم > 


>/111< 


<2 ( حرطط2 > 
< 01 /> 


من خلال الصورة أعلاه حذفنا جميع الأخبار وابقينا على واحدة فقط. وسنستبدلها بكود لاستيراد عناوين الأخبار ولكن هنا فقط نريد آخر ه أخبار فقط 
وليس جميعها لذلك سنضيف في الاستعلام خاصية جديد وهي (11110) ونضيفها في آخر الاستعلام ونحدد رقم للأخبار وسيكون الكود كما في الصورة: 


<"5وتاع 2"-18355 01> 
<017/> آخر الأخبار<"58320131228"-1355ه 03> 


: ("ططم. و 1 دمن " ) 1211106 «رطام2 > 
"5 ختنسة1 2556 104 لا8 0812158 5تاعم 58011  *‏ 5151:1501") تاطاعناي_لن دسحت 1نادعع 5 
2 

>111< 

<2 52251115((4) 3222317_طءطع2_ل1نوكتتم > #امع5) 211 صرطم2 > 


<11/><ة/><2 :['830 ' ] امعد مطعه ورطط2 > <"#"22عطط 11<>3> 
<2 ( «حرطم2 > 


>/111< 
>/ 03< 


بعد عمل الكود اعلاه سيتم عرض الأخبار ولكن ينقص الروابط وهنا نفس الطرق السابقة نقوم بعمل صفحة خاص بتفاصيل الأخبار وستكون 


مطام.06»)_2255 نفس الأكود السابقة في 


أع طا.0 آم حاععغ. انا لانالانا 


2. 


صفحات التفاصيل مع تغيير بسيط. وسيكون كود الصفحة كما في الصورة: 


0 /00967 :ع اا ١/08‏ 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /2:00967 ٠/08١1‏ 


<2 :('ططم. 120611 ' ) 121110 صرطم2 > 


<"025626 "1355-7 03> 
حيطم2 > 
: ("ططم. 219 رمه " ) 1211106 


فم نِخ نر) ظر ال 65 له 


1 ؟ه - 514 
1طةع هطع 11503126// 


6 


م 


: ("10-510 معطم 5تاء2 58011 * 501:آ515") تاعاعناك 1ن دتتستت 1نادع؟ 


( (525111) 322317ت_طء 2ط ع2_لن دتزمح- ه20 5 ) 211 
1 


0 
1 
3 


5620 ']7امع؟ > لوعفطه 
'غ20]'06 5 - ععله5 
26 ']م 5 - م5035 

1 

2 

<2<>/01 :20ع55 مطعه نرطط2 ><"58630"-1355 03> 

<"عع0"-و 1855 01> 

حيطم2 > 

جع موطعهة 

'حعظ>" متلعهة 

: ععم50 مطعءة 

2- 


+ نم نَم يم يم نِم يم يم 


فم نم نز ظر اى) 6١‏ ل- 


>/ 01< 


>/ 01< 


© قا هت 


دم يم ين ين 


فم 


<2 :('مصطم. 120622 ' ) 121110 صرطم2 > 


قمنا بإضافة التاريخ ضمن الديف الخاص بالتفاصيل بعد استدعائه من قاعدة البيانات. ونأتي لربط الصفحة مع كود الاخبار في صفحة «رام.1206::2 
وسيكون الرابط كالتالي : 


<"عع002 "1355-2 01> 


<" 265" -1355 01> 
<017 /> آخر الأخبار<"2011252عط"-61255 017 


دخ ن ظر هن وق 


ل 


م 


: ("ططم. و21 نمه" ) 121110 تتطم2 > 
"١‏ 132135 ©2556 104 لا8 081201882 ود5تاعم 552011 * 551:51 ") تاطاع1اكو_لن دنتسم 1نادع2 5 
2 


( 


<111> 
<2 52231115((14) 322317_طءطعع2_لودتتم > 7امعد؟) 7211 حيطم2 > 


فز نِم نر) كر 


<11/><ة/><2 :['20ع ']1اه2؟ مطععء صيطط2> <2 "< ' [10] 7ام 210-52 ططم . قاع 2_ععل ' <2عط2 43>" مطععء حيطط 2 ><11> 
<2 ( حتطم2 > 


>/111< 
>/ 01< 


وسيكون شكل الأخبار كما في الصورة : 


00101111 ال ايم 


١/08١1: 00967 0‏ 
أعجا.ه أمحاعع]0]0©1أ :اأهمرع 2 00967 :2 اا 08لا 


أع جا. 0 أم حاعع]. /الانانا نالا 


وبعد الضغط على احد عناوين الأخبار ستكون كما في الصورة : 


- ته 5 2 9 خا ع واد . 1 0 ١‏ 0-1 7مام.دسعه_غع ل /عءزهمم/غدمطاهءها 3 | جا »> 


وهام اشطآعك 


آخر الأخبار مبن تحن اشتصل يتنا 
رواد التكنولوجيا تهنئ الأمة العربية والاسلامية يمناسية شهر رمضان الميارك 


201007 
0 1 له الا رساي بناسبة قزر رشان السار كر اعاده لك عينا رات بان رالبر كاك 


خلاصة حول التطبيق : 

بعد أن تم الانتهاء من الموقع سيتم رفعه على سرفر موقع رواد التكنولوجيا وتطبيق عملية الرفع 
والتركيب وما إلى ذلك. وهنا نريد الاشارة الى إلى بعض التنبيهات. تم إنشاء التطبيق الأخير للتعليم 
ويعتبر موقع بسيط ومدخل للغة مطم لمن يريد تعلم اللغة بشكل احترافي وربما ينقص الموقع الكثير 
من الملاحظات او التعديلات التي بإمكان المتعلم ان يستفيد منه ويعدل عليه كما يريد. هذا التطبيق 
وهذا الكتاب ليس إلا مفتاح لمواصلة التعلم والإبداع وليس للتقيد بما فيه بل بالبحث والممارسة وتعلم 
الجديد وتعلم الإخطاء وإصلاحها. 


وقد كان الغرض الرئيس هو تعلم أساسيات تصميم المواقع والانتقال لإنشاء المواقع الالكترونية بواسطة 
السكربتات وأنظمة إدارة المحتوى ويكون لدينا فكرة وخلفية حول كيفية عمل المواقع وطريقة التعامل 
معها مثل: جوملا (1001311:4) وهو ما سنتعلمه في هذه الكتاب إن شاء الله. 


ولرؤية التطبيق الدخول على الرابط : [5001/اعد.مأمطءء).؟795 أو الدخول على الموقع الرئيس أعص.متمطاءع). ىر 


11 0 /00967 :ع ١/08١1‏ 
١ 0‏ أعراءهأم حاعع]©0]أ :اتهمطع 2 /2:00967 ١/08١1‏ 


رفع الموقع على السرفر وإطلاقه 


بعد الانتهاء من عمل الموقع الإلكتروني ومراجعته يتم وضعه في استضافة تقوم بتركيب الموقع عليها وهنا بعض المعلومات العامة حول الاستضافات. 


الاستضافة 

هي عملية وضع صفحات الويب على أحد السرفرات الخاصة بالإنترنت أو المتصلة بشبكة الإنترنت وبواسطة دومين يتم حجزة عن شراء استضافة 
مدفوعة او الاشتراك في استضافة مجانية. قبل عملية الاستضافة للموقع الالكتروني لابد من اختيار المؤسسة او الشركة المقدمة لهذه الخدمة بشكل 
دقيق وحسب مواصفات ومتطلبات الموقع الالكتروني الخاص بك. 


إن الاستضافة للموقع الالكتروني تلعب دور كبير في ظهور الموقع الالكتروني بالشكل المطلوب وحمايته والحفاظ على قاعدة بياناته اضافة لتوفير 
مساحات مناسبة ومقدار تناقل لا محدود للبيانات. يفضل أن من يدير الاستضافة أو يقوم بشرائها وإدارتها أن تكون لديه خلفية وفكرة حول التعامل مع 
السرفرات المستضيفة وطريقة عملهاء بالإضافة إلى قدرته على التواصل باللغة الإنجليزية مع الشركات المستضيفة. إضافة لابد من يقوم أخذ استضافة 
أن يكون له إطلاع على الاستضافة ومتابعة هذا بالنسبة لمن يعمل في المجال ولا يحبذ لمن لديه موقع ولا يعمل في المجال نفسه. 


وهنا بعض الخصائص التي تعتبر مهمة وتكون ضمن العروض الخاصة بشركات الاستضافة: 
الخاصية معناها ملاحظات 


وهي مقدار المساحة المتاحة للموقع وتحسب 1 . 
المساحة ١‏ 1 تتوفر حاليا مساحات كبيرة ولا محدودة في 
بالجيجا بايت أو الميجا بايت / :5 ١‏ 
(ع2م5) بعض شركات الاستضافة 
حيث ٠٠٠١‏ ميجا بايت - ١‏ جيجا بايت 


وهي مقدار تناقل البيانات وهي شبيهة باشتراك 


مقدار تناقل البيانات الانترنت حين تستنفد مقدار البيانات الخاصة | ويفضل شراء استضافة تكون مقدار تناقل 
6 بك يتم فصل اشتراك خطك. وهنا هو مقدار ما | البيانات فيها لامحدود (مفتوح) 
هو مسموح للمتصفحين لتصفح الموقع. 


عبارة عن بروتوكولات خاص بإرسال البيانات 


عدد الإيميلات بالإضافة لخاصية دعم . ل ا 5 . 
عن طريق السرفرات المدفوعة ولها أهمية | يفضل شراء استضافات تدعم هذه الخواص 


(53112 يع م02م) ١‏ 0 
لبعض المؤسسات التي تدعم إرسال النشرات | وتكون لامحدودة (مفتوحة الارسال) 
الإلكترونية الرسمية 

الدعم توفر الدعم في المؤسسة المستضيفة وحل | لابد من وجود دعم بوسائل مختلفة مثل الهاتف 
(مممنك) المشاكل والشات والبريد الالكتروني 


١/08 ||: 00967 0 111‏ 
اا أعم.هأمداعع]©م6م1 :اتأهمع ‏ 772755202 2:00967 08||8/ا 


حكن 
بعض شركات الاستضافة المعروفة والكفؤة في مجال استضافة المواقع الالكترونية. 


5 


الشركة الدولة ملاحظات 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
+112121105111 الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الانتمانية 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
11121164101 الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الانتمانية 


20141101 1 5 1 3 
الولايات المتحدة الأمريكية لا تتطلب إثبات هوية 


خطوات رفع الموقع على الاستضافة 
هنا خطوات لابد من عملها بشكل دقيق قبل الرفع وأثناء الرفع للسرفر والخطوات هي : 


نقوم بعمل قاعدة بيانات جديدة على السرفر المستضيف وحفظ كلمات المرور واسم السرفر المستضيف الخاص بقاعدة البيانات. نقوم بتصدير جداول 
قاعدة البيانات الخاصة بنا في الجهاز إلى مجلد معين في الجهاز ثم عمل استيراد للجداول لقاعدة البيانات الجديد على الاستضافة. 


رفغ جميل ملفات الموقع المضعم من الجهاق الخاض ينا إلى المكد العام انخاض بالانكضاقة أي مخ مجلد الموقع العام الخاض بنا إلى المجلد العام ويا 
نضع الملفات ضمن مجلد مالم تكن لدومين آخر. ويجب ان يكون اسم الصفحة الرئيسية الخاصة بالموقع «رطم.ء120 أى «رام. 4 لستذقء0. 


نقوم بالتعديل على ملفات ال1[م.02158» الخاصة بالاتصال بقاعدة البيانات وتغيير بيانات الدخول السابقة بالبيانات التي حفظها في الخطوة الأولى. 


التطبيق العملي على رفع المواقع الالكترونية: 


من خلال التطبيق الخاص بنا سنقوم بعملية رفع الموقع كاملا واطلاقه والخطوات كالتالي: 


نقوم بعمل قاعدة بيانات في الاستضافة (تختلف الطريقة والواجهة من استضافة إلى اخرى ) ومن خلال الاستضافة الخاصة بنا نقوم بالدخول على لوحة 
التحكم ثم الضغط على زر (7512210 115 0/17501): 


0 0 /00967 :ع |ا8 ١/0‏ 
ا : أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


: فب+؟ 62 5 000 
7 >5 ج33 © .ين ع حظة طللى حجن خم 
عأممع مأملكوعم امانا5ع:و:5ه2ا0د5عروضوومط 2 نعوعم زان عأمصع اممو مرزممم ©اوذرانا ©هالودراز 
كزان 08 


5ع وضومم 0 08 وه03:3635 2 لان50رزانا 539 5 
الاقم 0 للا 


ستظهر الصفحة التالية : 


12310 0263235 ©5901 /ااا 


لز 1280 /ز//ك © 17101 3/2 25// 172/715 031283565 11712 :1113/1121 3255 0] /ز5ى © 3/7 17/ 17/0/1718310/1/ 07 5أ0/ 510 10 نامب ز /3//011 51302525( 001 كزان 
210 ,2/715 أ5ولزى /|1113/18092/712/1/ /1/ 0111© ,208/05 17/أع|اناط 50/712 111/0//10 320/210/15 تاع/انا 1113/1 زجا 0 010172 12 3/2 021382525 01 ك/زا/| .101113/15/ 
2 5دع32 10 2/7/2025 2/ا79/ |1173 5ع 5لا /01/72 07 //113/ 173/7 |17 0117/ كزع ولا ألا كبزأ/| زا ,0 ]| عاوع0 10 0ع12/ /آنامبز ,ع 08188625 5 عدنا 70 0175 
0218825 1/781 10 ع/7/اا 01 170/77 1290 68/1 03187356 


5 ثم 078316 :1 م516 


1 ا تعدوطه 02 برعلز 
معأ5 رعلا 


نقوم بعمل الاسم في الحقل أعلاه ثم الزر الأخضر (م»54 غ»71) وستظهر الصفحة التالية : 


,ج09 1 ##«اعددط وهل ع5 0ع600 
:5615لا 03180356 018316 :2 م516 
7 أعع10م _مههن اكراء 0 
“3 5اعاع313اء لعاع5 تع ولا 


[ 0 | 010602 الححاعلد"| 


|فعمممفم مف فوة 


:(متحوخ) 10مندو وم 


0 
1191ل :«7ر:) نومره 


في الحقل الاول نضع الاسم المناسب لقاعدة البيانات والحقلين التاليين لكلمة المرور ثم الزر الأخضر (تاعونا عأوء:0)) وستظهر الصفحة التالية : 


110-000 0 /00967 :ع |ا8 ١/0‏ 
١ 0‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


”!710971 0 كعهم لأ "إاو ون وو مك مع0م0م 
35 156 10 مء5لا 800 :3 مم51 


ان زه وول 
يزه :ع5ه0220] 


7 ل 
34 

3 ب 5 
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7 7 
8 8 
7 7< 
7 8و 
7 7< 


من خلال الصورة أعلاه نقوم بالتأشير على المربع الأعلى وتأشير علامة الصح على الكل. ثم (م»546 غ»71) وستظهر الصفحة التالية وهي الأهم 
وتحمل كلمة المرور واسم المستخدم واسم قاعدة البيانات ثم الضغط على الخطوة التالية وستظهر الصفحة التالية وتعني الانتهاء من عمل قاعدة 
البيانات. 


ججح لصخ سس سس سس مجججص تتم هر لجن سمدم 


وم| عو023دا/ا 0225 مع ع اودع الا اتهموع اعمومع 


50 220 د هسه تك 5 


12210 022025 ©9019 5 ااا 


»851 156 1616م00© :4 ممأ 


."مطامأععزه:م_ءمملأصان؟” 2865ل عط 16 لع200 عدن "أععزمرم_رملغصانة" يعدنا 


5 تعرأمصة 00م 
.0218635 01 5 لان ]ناملا 101 عدن [عطأمصة 00م 


ع0 ناعم 


00 0 /00967 :ع اا ١/08‏ 
١ 00‏ أع .هام حاعع] ©1010 :اأهمع 2 00967 :2 عااا8 ولا 


هوم" 


نقوم بتصدير قاعدة البيانات الخاصة بنا وهي بالدخول إلى ال100211056 في السرفر المحلي الذي نعمل عليه ثم إلى 27:2012:مام وستظهر 
الصفحة التالية : 


9) قاعدة بيانات | (لل 501 | ) الحالة | 52 المستخدمون | 4] تصدير | [ج] استيراد | طن الإعدادات | 52 سيل تتناني | || إستنساخ || [< متقيرات | ك ميموعات المحارف | #ة] محركات | 


62093 


وه تغيير كلمة السر ٠‏ خانم: مإرطن)! ذآنا أومطاوهءعها 

اك اناا :عم عنمعه 

إصدارة المزود: 021-5612) )عبمع5 /[أأصنات00© 501 رزانا - وما) 
تسخة البروتوكول: 10 

المستخدم: 1006001021051 

(8تأن) علمعامنا 1-8آنا تأعدوجء تعرمعه 


خادم الو يب | 


٠‏ 4.12 5/طناص (جممانالا) 4.4 2/عاعومظ 
٠‏ - 20111026 - 5.0.10 لناوذلام - أوذلزحمطنا :ممأدعنا أمعناء ع0368095] 
7+ :35101 5 


٠‏ اأوذلام تممتومععره مرام رهقي 


ماح كر /امظم 


٠‏ 4.0.4 :مه1أ13ماما ماوعلا 
ه مستتدات وتاثقية 

فد 

٠‏ الصتحة الرئيسية الرسمية ل 00 ثر/زا/اام دام 
متلركة 
٠.‏ 


ومتأقاامء ومتأععمممء بعبوع5 © : ا 1 أء_اقعمعو_قتأن 


561005 ععمو نوع ممم 


يخ : © ءودلو30 - ذغل| ؟ 36م - العربية 
49 مظير: | ؟ عتمممطقممم ا 


ه حجم الخط: 


8# 0 ؟) 


فق د5ووتناءد عدداا 


اجلب دعم 
قائمة التعديلات 


نقوم بالضغط على (قاعدة بيانات) وستظهر جميع قواعد البيانات ونقوم بعمل كليك على قاعدة البيانات الخاصة بنا وهي اع 21:0 وستظهر كما في 
الصورة: 


* عم /غدمطاقعها /غعمطاف ها ,للك 


2 جه جو عدي8 دع اط ميقع زمعم - طل7م امع نه دم د_طل:2--81 ناه ا !م 1733# 9ع 9140117ع 04340974689 - مععاه7 ممع لو ارم احم له تزحمم طام/غومطاهعه! 5 © ج >» 


يده طلدهعها » © معرمم 
تم بناء | (لكم 501 | 8 إيحث | ) استعلام يواسطة متال | 4] تصدير | (] استيراد | “/ى عمليات | 22 الإمتيازات | © 5©«ناناه | ©) أحدات | 36 5,عووف,1 


الجدول 0ه العملية صقوف (9) توج دهتغدااه) الحجم الحمل الراند 
6 متصلج [5] استعراض آمل بناء ذا إيحت 6 إدخال 9 إفراغ 9© سقط >0 180008 أء_اقمع0عو_8أنا 16 كينلويايت 2 
[) تامعدم استعراض أمل بناء ف إبحت 3 إدخال #9 إفراغ © سقط -5 8لامهها ء_اقعمءو_وئانا 16 كينوبايت ع 
9 دبعم 9 استعراض #مق بناء جا إبحت غم إدخال ## إفراغ © سقط -6 60008 كء_اقعمعو_قآن 16 كينوبايت - 
0] معه استعراض مل بتاء ف إبحت 6غ إدخال © إفراغ © سقط -2 008هها كء_اقعموو_8أن 16 كينئويايت 9 


«< : المجموع 3 8لمهها أء_ادعمعو_قكان 54 كيلوبايت 0 بايت 
4__ 8 تحديد الكل | مع المحددة 


الاسم ا عدد العواميد: 


0 /00967 :ع اا8 ١/0‏ 
أع .0 أم حاعع]©10أ :المع 2 00967 :2 ااا كلا 


أ (جا. 0 أم حاعع]. /انانانا نالا 


لضا 


من خلال الصورة أعلاه نقوم بالتأشير على مربع (تحديد الكل) واختيار من الخيارات الموجودة في (مع المحدد) نختار (تصدير) كما في الصورة التالية: 


[لعاغدمطاهعها » © تععرممم 


8 يناء | ([لل 501 | ا إيحت | [3) استعلام يواسطة مثال | ه] تصدير | +2 استيراد | “/ى عمليات | 22 الإمتيازات | ّي 065ناباه80 | ©) أحدات | 36 5عوو1,1 
العملية صقوف وو توع ممنغهاام) الحجم الحمل الزاند 


إتسخ الجدول مع البادئة 


3 


بعد اختيار تصدير ستظهر الصفحة التالية : 


م كل اطتو عم دع اطمايق عع زم,م- طل7ملامع بطع دند_طل:2-. اناف !م #]ء733ط1ء9عع9140117أع89ع974ع4340ل - مععاهغ7 ممع لم المتحملمزحمم ام /أدمطاةوه| 5 | © جه » 


]غك وطادعها » © ععرمءم 


أل يناء | للم 501 | ذا إيحث | 3) استعلام يواسطة متال | +] تصدير | + استيراد | #/ى عمليات | 22 الإمتيازات | ني 0©5نانا0 | ©) أحدات | 32 5رعووو1,1 
تصدير الجداول من قاعدة المعطيات "اع ع[10م" 


متهج التصدير: 
© كمملامه لوتماصتم عط بزامه نزهامدال - عاعان0 


© 5مملامه عاطأودمم اله لإهامذأال - نممأدنات) 


معم0 
عم طاطغ ؤه عع اذ معمره كلزه ناش 


10106 م1 بنامداذ 


اععمقه 


او2.5) 6عزم ل 


من خلال الصورة أعلاه نقوم بالضغط على زر (إنطلق) وسيتم تنزيل الجداول مباشرة كما يظهر في الجزء السفلي على اليسار من خلال السهم الأيمن 
نضغط عليه ثم نختار 101061 122 511018 (عرض في المجلد) هذا لمستخدمي جوجل كروم ثم نأخذ قاعدة البيانات ونضعها في اي مكان نريده ونحدده. 


0 /00967 :ع اا ١/08‏ 
أع .هام حاعع] ©1010 :اأهمع 2 00967 :2 عااا8 ولا 


أع جا. 0 أم جاعع]. /انانانا نالا 


ا" 


نأتي الان إلى رفع الجداول إلى قاعدة البيانات الجديدة على السرفر وهي عن طريق الدخول على لوحة التحكم ثم الذهاب الى زر 413ج2(:20ترمامكما 
في الصورة : 


ا 00 2 6 + ١‏ 
- 9 به م 0ك ام 0 
عأممع؟ وام لكوعم ناما 50ع:و:5ه2 50م ,وضومط 2 أموعم مانا 
5001م وأومم 20 08 03136355 01كرزانا 0539 


0م نول شررارامم ©ل0دلاانا ©الدرانا 
ادرانا 08 
انلام سنا 


355 


نقوم بتسجل الدخول عن طريق الصفحة التالية باسم المستخدم وكلمة المرور الخاصة بقاعدة البيانات التي أنشأناها كما في الصورة : 


عرق آلاامام 
نلق نا ا/لاملام 6غ عمرمعاع نالا 
وسوكمجرع 


| عوقناومها | (آ 


موتاومع | 


ا © (زوما | 


: 

| 

1ك 20 
إ! 


نا 


ارعت. 


6355100 أعوع 2 


بعد الدخول الى قاعدة البيانات تضغط على زر 1837016 أو استيراد باللغة العربية كما في الصورة: 


_- ادعوم 


: : : قن امام 
5عءماأومع هّنا | كاءموطع 5 د5عاطهليهلا 4 ععلومرطعمير5 19 د5ومتهوهد عق )ممما لك ممع كنا 5بههز5 ينا 501 (لغّ د5عمدطهد0 3 2 2 
© © © 
اعلااع5 ألاع1اناء عأ مأضا وملممصما ١٠؟‏ ... (قفاطها أممعه8) 


0363035 ذا لوناه؟ دعامج] ملا 


:متها 6غ مااع عامة منهم0 © ١‏ 


85560م60ن 6ه (ما ,2م521 ,ماعو) 0لع5ودعءممممء عط نزهم عاكا 
مأع.اوة. :عام3<«ع [ممأكوعمم لرمع].[1هممم]]. ما لمع أكنام عدمقم 1125 لع5ودع/ممممء مر 


(8نانا50 ددانة) معدمطء 516 ول | واأع هومه28 | ]ع أنام0101ء آنامل/ا 8100/58 © 


:أمحماألم_عملأوتوألعدهط/ بوماعع ال 0دمامن 'عبمعد معني عط ممم غععاع 5‏ © 


من خلال الصورة أعلاه نقوم بالضغط على زر 131 2120056 أو اختيار ملف باللغة العربية والذهاب لمكان الجداول التي في جهازنا واختيارها ثم 
الضغط على زر (انطلق) أو (تنفيذ) اسفل الصفحة السابقة وسيتم رفع الملف واعطائك رسالة نجاح بإتمام الرفع كما في الصورة التالية: 


0 0 /00967 :ع |ا8 ١/0‏ 
١ 0‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


لا 


مرو عو حر 


© © © ا <د 


5عووة1 32 كامويع ©) | 5مملايمه 5ممناهيعم0 فق )ممصا 1ك مومع ل | بموبس9 3 طععمود5 ذا الل5 لخمْ ‏ عمنفعين5 تمل 


0 (85ا80؛ أمععوم) 


لليياءكت 
ناعم 


!" ع0213635 عط ماما وملرممما 


:اهمها ه؟ ملاع ل عامها مغوع © © ١‏ 


.18550م601 0ن 01 (مأك ,2م521 ,متعو) لعددع,مصممء عط بزهم عا 
مع.لوة. :عام ةع _[ممأكدعم مرمع].[أهمممم]]. ما لمع أدنم عدمقم 5أع1ة لعددعممممء م 


(8الا50 عرهانة) لمعدمء عا ملا | عازع 05005 | عأنام0مء اناما عدرررم, 8‏ © 


و-- ١#‏ لمماععءال 0دمامن عبوعة معنن عط ممه أعواع 5‏ © 


ا قغأن | :518 عط أه اعد عاعهروت. 


غومتها امتكوم 


/0/75/اع73/759] معط (رقء 1 رعباعلننو! ,7/25 ع3/9/ //0ص71/ 10 برقلا 9000 3 ع5 ]و77 71/5/ اتنا أمعمن ملاط عط©ا 5 عدوماء 5غ عأعغاع0 امعد عط عك3ء مأ غاممم1 مد أه ممتاأمنمرع اما عط مالم 2 


0 :نام 51 11 000 ومتاقاد ,مكار 6غ ونام أه ععطصوسلةا 


رفع ملفات الموقع كاملة وذلك بالذهاب للمجلد الموجود فيه الملفات ووضعها في ملف مضغوط كما في الصورة : 


< لعزم <١‏ عصي ١‏ مومهب ١‏ (ع)عادت0 اما ١‏ بعابمصمع ١‏ لل 


[ آم ا لاه علط ص8 مم0 2 > عتتمدويه 
و ل مم عدم 23 عمقلا 0 
...أ قطمعم مأ كعا1؟ لعقرمممند عمتطممم 0‏ و8 ووه كش اعد - 
ممه 
815 فحص الملغات المحددة باستخدام ‏ 3 كى لان كععدام غمععع8 إل 
ل 1 تمده لل 
"ممع ءزهم” من لمم 18 عمنوى للا نهنا 39 
...انقصع همة دمع ممرهع 8 كممء لل كامعصميءه0 3 
اتقدمع لمة "نوع زم,م” مأ دمع ممرهع .8 عوهصا لل عتكنانة الى 
كلاه (معمماه) مدع ممممع .1 | ١‏ ملعو 0 كوص نل - 
اعمط عامعت) ممماءء 0 195 2 0 6 ححالا 
معجدينا ف رمم موعدم 2 منامتوع مرولا هه 
مع امع يموع يكن تسحعص عم >2 
ان 0 ع د وبمعم_عل َ عسامممهح قار 
موك 8 عغعاء0 تسكم 5 - 

(6) عمه الم مره فل م نستساع ع طم سما 6ق 
»ملما_عصمم؟1 © (:0) عمساملا معلا ىت 
ممع -ععوما :7" (ع) عمساملا معلا وت 

|38 م5 ملام 11:1 م 715/٠0/٠7‏ 7 (ع) عدمساملا معلا وت 
|26 غمقء؟ ملام امبوء م 7151/6/7 م 7 
|2 عمد مام لمع /م يقل وم 7 عامسسطع لا ج03 


بعد التضليل على جميع الملفات نقوم بعمل كليك يمين ثم (إرسال إلى) ثم اول خيرا (:101061 76)0م731 6©1:6550م2م0")) وسيكون شكله بعد الضغط 
كما في الصورة : 


العا ٠م 1/١‏ كوم أن كعدط زم اك 
لاه عا :7زم 71/7 عبن دمع10/ 1 
|8 1.562 عقطءة 28 عأشقم لا ٠1ب‏ م 715/٠6/١7‏ منصده 9 | 
118 خمى5 ملام لالاطء م75/٠/15١7‏ وقمى :9" منموعممولا زه 
118 أمقع5 ملام 711/١1/75 ٠51‏ 2مم :7" 


بعد الدخول الى لوحة التحكم نذهب إلى التحكم بالملفات بواسطة الضغط على زر 71312861 ©1711 كما في الصورة : 


ا 0 /00967 :ع اا8 0لا 
أع جا. 0 أم جاعع]. /انانانا نالا 


أع .0 أم حاعع]©10أ :المع 2 00967 :2 عااا8 ولا 


ي4 
© 52 >> 5 5 5 2 
علد 056 هلالا 0151 أنمت فاط لإعووعا عام مزه 
5نامعع,يم 503 حللها 3039لا مماءعد8 
0539 )3039لا ممم 
4/7 


عمدتفعك اع30230 1لا عاط 


11111011]ع0 هلالق 201115 عأمعهكنا "111110الانا" ععه عدوعاط .عو03غ5 عواامه عه؟ عأ)ملطعم عرنه 6ه عكن عغدمممعممهمأ لؤاوااد غ0م ععمل 


ع1 تمع لمتممعع 
.أعموط عه مملععه عععلغروط عل5 ازعايا ععدعام ععمبمعة متماعقط عوثامه لعنامعمم3 عمعا .عجممعاع/ ولزولاات عد معزو 


> » 40 ثم ف ك 3 


7 
و 
هك شنا 5-4 36 0 10 ل« لننا 6 
عمممه ععوعك 120 / عومقلع) الزكبم 600 الع عمومعم8 عععاء0 لذهاوومه لددامنا عاص عياهلم ‏ بزممت كلذ عاك مومعل 
دتمععه عمعزلع ملع ععلامع 


بعد انتهاء الرفع نقوم بفك الملف المضغوط بالضغط على الملف المضغوط ثم إختيار (172012)0) كما في الصورة 


٠١ 100001 ©‏ تمده .ده 


لعغكم! عناملا طاغاينا ممتععمممه مآ لعلهمامب عع اذ" .0ه0266مم)مأ ععمى عه] 011101110105 للق 501115 عمعهكنا "1111120الانا" معد عددعام .عوه,م2 عوتامه عه عام ممعم عه 6ه عكن عؤغأوارم 


.أعموم أه ممتمعد دمعمغردم عط غزوآ/ا ععهعام ععم/ 


, 2 5 213 
إن ان هنا 2 هه ات كا 8 
مهمع مك «عالا | عومودككء ‏ اللاكبر ‏ علمع عع عودمعم | عععاءم 
كتصمعم ‏ +معهع ‏ عمعامع 
اله عععاءددنا [آلل] الدمعععاءك [] فدماعع يي" تمدمممع 832 عاعدق #9 اعبعاعمه منا ] عددن 9م 
م 6م1 مهاد مويض) 01560هاء! :5ق مم5 ةا 
علعمعو ءتعوقاء 8م إلام 9:19 /71003 | 18 152 ١‏ 


نقوم بفك الملف والتأكيد على ذلك بعدها يتم الذهاب مباشرة للملف «رطم.ع6ددم» و الملف «ام.52 رم وتغيير بيانات الدخول بالضغط على الملف 
الأول مرطام.عقغصى ثم الملف مطم.2ع )صم واختيار :101)0 ©200) كلا على حده: 


ملف «رطام. 2ع111م» 


© 5 ف كي | مة || ؟* مده )!| ؟ غ108 © هخ 


مطم2 > 
, , ,"1062152058") عع ضدم_11ودتتقمد حدمت 5 
22 
ملف «رطام. 52 17جم» 
© ||[5ا ف اه عة || ؟* مده ||| ؟ :108 © د 
مطم2 > 
0" ٍ" ") #ععصدمه_لوديزه > رمه 5 


2 


بالانتهاء من الخطوات أعلاه نذهب للموقع إذا كان على دومين او الى المجلد الذي اطلقنا فيه الموقع كما هو في التطبيق الحالي وسيكون الاطلاق 
الخاص بهذا التطبيق على الرابط : «رطام/اعد.ه1امطاءع)//:ماغط/ 


أع طا.0 آم حاععغ. نا نالا ناا 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عااا8 ولا 


أعجا.هأم حاعع]0©1]طأ :اأهمرع 


وسيكون شكل الموقع النهائي الخاص بالتطبيق كما في الصورة : 


الرئيسِية اخسدماشتا من أحمالستا آخَر الأختار من تحزن اقصسل بسقا 


شبكات وصيانة حاسوب جرافكس وتصاميم تصاميم مواقع الكترونية 
تنصمم شيكات بأحدت التقنيات وبكل من الخدمات الراقية والجميلة التي نقدمها تقوم رواد التكنولوجيا بتصميم المواقع 
احترافية ونقدم خدمات الصيانة للحاسبات تصاميم لجميع وسائل الدعاية الالكترونية الرسمية بأتواعها سواء كانت 
والشبكات بأتواعها للمؤسسات والشركات والإعلان,قريق محترق وخيرة عالية في تجارية أو مؤسسات خدمية أو حكومية او 
والأشخاص... التصاميم الورقية و.. منظمات أ.. 


أع .0 آم حاعع]. الا لانالانا 


2 


إواصحهوحهلم 


0011ل 


2 !1001114 غ 2.5 00131141ل 


1 1 111 1ن الها 001711171 0115 


نظام إدارة المحتوى (جوملا) 


١/1081: 009677 0 11‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


با 
الباب الخامس جوملا 


جوملا (001/1.4[) 


جوملا نظام إدارة محتوى 17/15) (5157511511 '11411417/1151/1171 '2017111171) يمكن من خلال جوملا إنشاء مواقع قوية وذو مواصفات 
عالية وتطبيقات ويب قوية وبسهولة تامة. و وتعتبر جوملا نظام إدارة محتوى مجاني مفتوح المصدر ومتوفر للجميع. 


ما هو 115 ) (11/1 51751 11111171/ح اح ١1‏ 017111171)) 


هو نظام يحوي أدوات مبرمجة بشكل احترافي تساعد على ادارة محتوى الموقع الالكتروني والتحكم بأجزائه وبياناته وظهوره بشكل عام ويبرمجها 
فريق من المتطوعين حول العالم وهي مفتوحة المصدر مثل : جوملا - وورد بريس - دروبل. 


تتميز هذه الأنظمة بالمرونة العالية والسهولة في ادارتها بعيدا عن التعقيدات البرمجية الخاصة بالمواقع الالكترونية وبإمكانها تقبل أي مكونات خارجية 
من مواقع داعمه لها وتركيب اكواد جاهزة تسمى (مكونات - موديولات - اضافات مساعدة ) بشكل يدوي وبدون برمجة وبسهولة تامة بشرد توافقها 
مع الاصدار بالنظام؛ كما يوجد تحديث دوري لهذه الأنظمة من المواقع الرسمية الخاصة بها. 


البداية مع جوملا 1/14 00[) 
سيكون لنا تطبيقات عملية على جوملا وكيفية تركيبها وعملها من البداية وسيكون لنا الان مقدمة حول جوملا وشرح عام عن مكوناتها ويمكن زيارة 
الموقع الرسمي لها من خلال الرابط : ع:795531.[001212.01 


مكونات جوملا! 
بداية جوملا نظام مبرمج بلغة معروفة وهي 7117 مع قاعدة البيانات ,71555001 بالإضافة إلى لغات تنسيق المواقع ( - 5853© - 55© -.1117/11 
1010151- 1811311:5). 


مكونات نظام جوملا : 

قاعدة البيانات (ع1226225). 
الموديولات (5وع0100111). 

المكونات الرئيسية (11)5ع 0170012 ©). 
قالب (6ه[صصصدع1). 


اضافات مساعدة (كستعس[ط). 


قاعدة البيانات (122621256): 


قاعدة البيانات وهي التي ستحوي مكونات الموقع من بيانات وسجلات. 


57000 0 009677 :|| 1/08 
امن أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


0 
الموديولات (5وع7100111): 
هي أحد اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع. 
المكونات (12]5ء:60122701): 
هي المكونات الاساسية الخاصة بالموقع وقد تحوي موديلات واضافات مساعدة خاصة بها. 
قالب الموقع (ع26[مرددء)): 
قالب الموقع عبارة عن ستايل مصمم خصيصا للنظام جوملا أو لأي أنظمة أخرى ويتم تركيبها للنظام ويتم تغيير شكل الموقع من خلال قسم القوالب. 
اضافات مساعدة(ورزعن21): 
عبارة عن اضافات يتم تكرارها في اجزاء الموقع او تعمل عملها بشكل عام داخل الموقع بعدة أجزاء وليس جزء وتتكرر بشكل ديناميكي حسب وظيفتها. 


صورة عامة حول موقع يعمل بنظام جوملا: 


حب ساس ّْ سس © نا 


ل 0 /00967 :عا اا8 اا 
١ -‏ أعاءهأم حاعع]©0]طأ :اتهمطع 2 /2:00967 ١/08١1‏ 


حسب الأسهم الموجود في صورة الموقع أعلاه جميع الاجزاء المشار لها عباره عن موديولات تم التحكم بها من خلال وضعها المكان المناسب لها 
وأيضا تحديد الجداول للبيانات أو أقسام الموقع الذي ستستمد منه البيانات وتقوم بعرضها. 


11انا0 عام5 5ن 8 71015 #لناينا 2015 كاكآات ممم علامم 


نااممم عالمن8 + عصمير 


+5201 81011016 
افش بموابعة 80 
عاعوغك وا مع تاتطهاتهييم 
00 0 0 0 :مع 
00 م 
0 يله ينيو فقن عه عقوي 
58+ 
0م دمؤنامناغعنوتاة انك غن معمماغن كقى 1 
 +549.00‏ عنودامعامء؟ دممع ع وغآيا أكام لمنغنه غمعدع هرم :1 


10م أنمدغمء غممةغاد قمودم مهلام باء مدلا 1 


هغء5 * 


0 اف عع 5 3 600058 


عند الضغط على مقالة أو خبر معين ضمن موقع يستخدم جوملا فإن المكان الذي تظهر فيه المقالة او الخبر يسمى (0012701:6126).وايضا هناك 
موديولات تتحكم فيها مكونات كما في الصورة السابقة. 
.286535 و5أآم)ناأ ع3 590065 303ناك03|6 غع 5نامأ06 غ6 5ناغع6مع5 عناوأغ5ا أطغهم غموغأطوط عناودعغمعااعم 


ع6 غأمعلمعط معام 53 آنال ععم00 .3ااناى عغ70125 أعناعع000 .عم لمعد غم معام 3ك ع56 3انءآاطعنا ععونع 
.0015| 07أددامعأل دناعغ76 غنا مغكناز 1قلأناانام غمعدوعقم5 ,)واول 3 مم لمع بعمممعه لانمكمعم17ألممء 


٠ 1‏ مده تمه 


في الصورة اعلاه نلاحظ الجزء الذي يحوي ازرار (ع]111) او (47666) وغيرها تظهر في جميع الأخبار أو المقالات للموقع بشكل أتوماتيكي. وهي 
تسمى 1125ع111م اضافات مساعدة يتم ضبط اعداداتها وتحديد الاقسام التي ستتواجد فيها. 


١/1081: 009677 0 5700‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


العمل على جوملا ١.١‏ 


سيتم التعرف على جوملا وكيفية التعامل معها وسيكون الاصدار الذي سنتعلم عليه هو النسخة 2.5.75 وأيضا نظرة عامة حول 3.36 300:312 ويمكن 
للمتعلم على النسخة 2.5 أن يتعامل مع النسخة 3.2 بكل سهولة لتشابه النظام واختلاف الواجهة فقط وبعض التعديلات البرمجية. 


متطلبات العمل على جوملا 
يجب أن تتوفر لدينا بعض الأدوات التي نستخدمها في تركيب جوملا والعمل عليها وهي كالتالي: 


برنامج سرفر محلي مثل (5931275617©1) وهو عبارة عن سرفر وهمي على جهازك يتم تركيب الموقع عليه وكأن الموقع يعمل على سرفر حقيقي 
على الانترنت. 


متصفح جوجل كروم بالإضافة إلى متصفح موزيلا فايرفوكس لتجريب المواقع على المتصفحين. 
دريم ويفر (10162113586296©1) ونستخدمه للتعديل على الأكواد وصفحات القوالب. 
اداة عناط»:181 وهي اضافة تضاف الى فايرفوكس وسنذكر لاحقا فائدتها. 


يفضل معروفة ولو بسيطة حول عمل المواقع الالكترونية ولغات البرمجة بالإضافة للغة الانجليزية. 


تنزيل جوملا من الموقع الرسمي وتركيبها 


نقوم بداية بإخذ آخر نسخة من جوملا من الموقع الرسمي لها على الرابط ع:173335.1001212.01 ثم التأشير على 7270171020 والضغط على 2.5 
23128 1311 باللون البرتقالي الغامق كما في الصورة: 


]0011/01020 * 


5 !0013ل 1001/1020 


05 كلض ااا مممعواط عط[ 


م0 غاأنا8 ععم دمع]أوء/لا 


25 !0013ل ملمع 2 5365 0316ملا ع39اء53 اانا 2.5 


3 !0013ل 1020 1انلا00] 


3 وول ممعم )عدم 0319ملا 10 أوناهء 300 كل3هالئثامل موتااتم 50 ع0 © 


!ةمهمل طثابن معرهأ5 ومتتاع 6 0655 300 كمه أكمعغ»اء 0 1101053005 © 


قمع ممنءعهم بعممزوع8 لإلدع-عاأطمص لصة لإألمع1]-,عونا © 


قأمعممع نوع اقعاموعع 1 


2 أ5مععنا اسك ستشس هوف > خصحسة 


0 0 /00967 :ع |8 ١/0‏ 
١ 000‏ أع .0 أم حاعع]©10أ :المع 2 00967 :2 عااا8 ولا 


ستظهر الصفحة التالية: 


3 0013ل 00/1030 ه» 


مم رعوواعد2 اانا 3.3.0 ,إكانا) وتاودع 


5ع0اءع23 ع30وملا هه 
5عوهاء23 ع30وملا 3 300 .3.3 إداومول 


7 ع0 5.3.9 مررزم « 5عأما١‏ عد5دعاع5 


إوضاأ5هلط !دالصهول #جه؟ 


لداحصممل طأأن معلدماحعط ووتأوهل اعلالا ٠‏ 


اع ار 


.2.5 !13مول 1030 نامط 


ع20ومنا )مع .2014 ,31 عع مرمععع0 الأمن لعأوممناك ع6 الأننا اعاطننا ,دالزممل )0 لماوعلا دنامالاع/م ع5 15 2.5 0011/3ل 
الاماع0 دذ5همقع ع5 عع5 ع5دعام ,3 013زممل 0 5مم1أعنكأكما 


ع950اء23 ع30]زومنا هه 5 !001113ل 00101030 هه 
26 ,عوقعاءد 206,ومنا 2.5.20 5 »2.5 ,انا) ادتاومع 25 بعوهاعدط اانط 2.5.20 ,(كانا) طدتاومع 


« 5ع20اع3م .25 001713ل عع015 


من الصورة أعلاه نقوم بالضغط على الزر 2.5 !7001219 1707521020 باللون الازرق الصف الثاني . بعد الضغط عليه سيتم تحميل آخر نسخة من 
نظام جوملا. 


بعد تحميل الملف الخاص بجوملا نقوم بعمل مجلد داخل المجلد العام 775957 ونسميه 10013132.5 نقوم بفتحة وننقل الملف الخاص بجوملا الى المجلد 
10121212215 ونقوم بفك الضغط كما في الصورة: 


ك2ماصممز م5 ||| ىه | - ١‏ 325امصممز ١‏ عع ١‏ مصوي ١‏ (ع)عاكا0 امهعم ١‏ ععامممع ١ح‏ ير ©4 © 


ععلاه؟ معلا صن8 > معم0 8 > عتاموو:0 


512 م1 7601 عه عدولا حتبح 3 
8 7765 قط اطه:2.5.20-5_دادورهه1 9 | ممناءء0 11 
معم0 5م انيه -1 
...كع ال عوط 85-1 كعءوام أمععع8 2151 
ععنا م52 3 
أعوماءده_اانا-عاطةغ2.5.20-5_دامممه! مأ عوط 8 كعلروعطنا 29 
1 اننا معم 0 كامع صيءه0 8 
د]ثاث فحص العلغات المحددة باستخدام عتكسانا الى 
كمه ىاع ا ولاه اام عرمؤوع 8 15م إكآ 
1 6 لمع5 , نيدن 
يالك منمنوء مرولا 4ه 
نكا 
انك رهحاك عأهع 0 تاس متك كٍِ 
0 (ع) دنه امعما ملك 
(:0) عساملا معلا وى 
عممقممعم 
(ع) عصسامل/ا معلا وت 
5ع تلعمممم (©) عصساملا معلا وت 


0 /00967 :ع |8 ١/0‏ 
أع .0 أم حاعع]©10أ :المع 2 00967 :2 عااا8 ولا 


أع (جا. 0 أم جاعع]. /انانانا نالا 


بعد فك الضغط عن الملفات نقوم بحذف الملف المضغوط او نقله لمكان آخر للحاجة ستظهر كما في الصورة : 


ص د س2 
: تتشطتز رسي صم 0 ان سس ا 0 
1 - ص و سس 0 وبر 025333722 2 سخ 


؟عهاه؟ معلا لييانانا > لابلاع قطة > بووعطنا ماع نساعمآ > عتامقو0 


2 


52 عم 70011 غ03 عممولا عدوت و 
عا عام 7اناء ص + 7١15/١5/7‏ مم غدامتملة لل | 
عا عام #اناء ص 7١15/٠5/7٠‏ عوعف إل كمدمامه0 ل[ 
؟ع10اه ع1 7انالء ص 7١15/٠1/7١‏ تك طلا كعع وام أمععع8 إك 
)10م عا 7انلء ص 7١15/٠1/7١‏ كمع مم ممم نا 
؟0اه؟عا 7انااء ص 7١15/٠5/7١‏ ععوهم] لل كع نوطنا 29 
عام عا #انلء ص 7١15/٠5/7١‏ كعلساعم 11 كثمعصيءه0 8] 
لامعا #اثالء ص 7١15/٠5/7١‏ ممتهاليعم] 1ل عادنانا الى 
علا عا #انااء ص + #/ق 7١15/٠‏ عودنومةا لل 5 
لاه عام 7اناء ص 7١15/٠5/7١‏ كعمورطنا لل دمع10/ أل 
اه عا 7انااء ص 7١15/١5/7١‏ دوها أل 
؟ع010؟ ع1 7انل+ ص 7١15/١5/7١‏ دتفعم لل منمموع مرولا ركو 
لاه عاع #انلء ص 7١15/٠5/7١‏ ععانومم لل 
لامعا 7اناء ص + 7/ق٠/15١7‏ كمتوسام لال عنام ممه تار 
10م عا 7انالء ص 7١15/٠1/7١‏ كعغداممع؟ ل () دنه ادعما ملك 
,10م عا 7١ائلء‏ ص 7١15/٠1/7١‏ مغ لها (:0) عصمداملا معلا وت 
48 +76ناء00 ع1 7انل+* ص 7١15/٠1/7١‏ 5وععع8غ5 ل (:ع) عصدامل/ا معلا وت 
28 غملع5 منزم 7ازاء صن 7١15/٠١27 ٠١‏ نضا (©) عمدامل/ا معلا وى 
268 +0ع7,ناء ه00 1أ/ااا 5انالء ص 7١15/٠5/7١‏ قاوممر اك 
8 18 أمعصناءه0 ع7 #اثارء ص 715/٠5/7٠‏ عدلاععنا 3 عام رسع لاا ج03 
568 أمع7ناعه0 ع1 7اثلء ص 7١1 5/٠١ق//7 ٠‏ عالامقعم ل 
118 عا 0151 7انالء ص 7١15/٠١27 ٠١‏ 5ط .كامطه, ل 
28 أ0ع7اناء00 ع1 7انلء ص 7١1 5/٠١قي؟ ٠‏ وممء .ماعو ل 


1 22 5 


كما نلاحظ الصورة أعلاه تظهر ملفات النظام كاملة نقوم الان بالذهاب على )102105 ثم الضغط على المجلد 30012122.5 الذي فيه نظام جوملا 
وستظهر الصفحة كما في الصورة: 


0 7 15 7 © « له # ا مطامعع لصارحصه ها لمكم أ/32.5اصرمه ز/أدمطاةءه| 5 | 8 جه -» 
'إماحصحه 21 00 2.5.20 !0113 0ل 
0 3010320| 6005© 5م566 
1810020 :1 


ةا أععاء5 


مهنم افاعم إداوم20 ع5 ومعيق عقن ما عودبومها عط غععاعو مودعم عاععدء ممتاهالهادملاع5 : 2 


(دعلثم طأنامة) دممق ام :5205 
5م16 :3 


م 


(30ع/اةوعط) وعنقع اق وعظ- معط 4:35 
653 883853 

(طعإمهمعط) مقع زمهرع6-مدأ5نمواء8 ملأ سواكممء مع :و 

(طوع20اومه8) الهومع8 

(وأموم8) 0510ة5م8 

(اماعمهقءمطط) مودوان8 

0اة 6 5 

ج23 81185 لع لنامما5 ممع ولط ااكلما؟: 7 

(مقنالاة1) أهمه13016 ومعملط . 

000 

(عناطنمع طاعودن) اعم 02‏ 

(كا0) اواموم 

(13اقأدسش) ادتاومع 

(صمملومتكها لعغزمنا) ادتاومع 

(56385 لعأزمنا) ادتاومع 

لت تا 

5 0و أمماوع 


8100 ناولاومن : 6 


,ع5مععنا عاطنه أععمعت تالزه عط ععومن لعودعاعء عمه مو عع5 وز ©)!3|نوه10 


0 /00967 :ع اا ١/08‏ 
أعاءه أمحاعع]©0]مأ :اهماع 2 00967 :2 عااا8 ولا 


أع جا. 0 أم جاعع]. /انانانا نالا 


54/ 


نقوم باختيار اللغة العربية في حالة كانت لغة أخرى ثم الزر 26 في الأعلى على اليمين وستظهر الصفحة التالية: 


حطرب سعيادا فحص ما قبل التثبيت ا كا 0 


1 : اختيار اللقة 
فحص ماقيل التنبيت من أجل 1/17 © 14:00 2014-!1مصه-30 [ ,8036 ] 6اطةغ5 2.5.20 !3الرهمل: 
2 : قحص ما قبل التتبيت إذا كان أَفٍ من هذه المناصر غير قدعوم ”أي غير متوفر" سيكون فكتوب 
باللون الأحمر (لا) عندها يرجى القيام بالإجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 << ميرم نعم 
3 : الترخيص القيام بذلك يمكن أن تؤدي إلى عدم تنبيت نظام جوملا! بشكل صحيح. دعم الضغط باستخدام خاصية 216 نعم 
دعم لغة التوصيف الموسعة اللا نعم 
ا 00-0 - 
56 استخدام لغة افتراضية متعددة وحدات البايت (أناة/ع0 5أ 80900396 | 0/8 نعم 
5 قييلة در إيقاف التحميل الزائد للسلسة متعددة وحدات البايت 065 01/1030 و5710 0018 نعم 
5 دعم محلل 1101 نعم 
6 الإسفات هرئيسية دعم 2501 نعم 
م1ام.3800]ناو85مم قابل للكتابة نعم 
7: الإتهاء 
الإعدادات التي يتصح يها: 
هذه إعدادات 640 التى يتصح بها من أجل ضمات التواقق التام مع نظام 
جوملا!. التوجيهات ينصح يها حالياً 
اكت سوف يعمل نظام جوملا! حتى لو كانت الإعدادات غير متطابقة مع الوضع الأمن (ع8100 5366 لايل لا يسفل 
0-5 عرض الأخطاء (05م587 بزقاموام). لا يعمل يعمل 
رفع الملفات (305مامنا 51) يعمل يعمل 
زمن تشغيل الاقتباسات السحرية (08006به دهن عنوة0/1) الا يعمل لا يعمل 
م0 وعذؤمن0 عأوةا"! لا يعمل الا يعمل 
التسجيل العام (6103/9 )عأواوع8) لا يعمل لا يعمل 
تخزين المخرجات (و10/ع6ن8 غناجال0) لا يعمل يعمل 
بدء الجلسة بشكل ألى (588 مادام مملودء5) لا يعمل لا يعمل 
توفرة 212 خاصية فك الملفات المضغوطة يعمل يعمل 


1013© برتامج "حر مفتوح المصدر" تم طرحه بموجب 681/لا0ا© رخصة جتنو العمومية. 


نلاحظ في الاسفل على اليسار كلمة نعم باللون الأحمر يجب تعديلها حسب طلب النظام وسنقوم بتغيير الاعدادات الخاصة ب1111015 (وامركتط وازالة 
علامة الصح من أمامها وكذلك ال ع1:3ع130311 16ام004) وذلك بالضغط بالزر الأيسر على 778127561761 كما في الصورة: 


هنا سا © - ق |- لد 86.2 ملوادع - لوللا مدمسالا آي 3 118101 كن 
دوملع مبرم 


وسطعل عأممع؟ : (وبطء 00 أدطممة ه © 
ممم لوسطءم .0‏ لي 5 70 39 بحث > 
]سا 2 ؟ 7 
- 


ععووة1 عاطهمع امه : (واطءم)0 
0 « - 5 - عتوان [ عتوات 77 عتوات 7 العتوات عتون فرعي || ,و2 | جا تحديد > 


أتماط 05 اتحرير 


الصفحة الرئيسية | |إذراج تخطيط الصفحة 


أع | 32 اس أساسى) اام + 1١|‏ - هم " 


9 8 ع 1 > عط ركد صر 


أبجد هوز أبجد هوز أبيد موز ابجك ابي 


نات 011131 1013001 313535 ؟ 1011100 ؟ 1300100 ؟ 130313 5101150 100353 183001035 010303 5111517 7 017 © 
د ره : : ١‏ : د د : ِ 


«دادىء,مدمه غنامكسه طزاد 2 الى ثم الزر #روم في الأعلى على اليمين وستظهر الصفحة التالية: 
- 


طكب!؟ غاءنامهم1 


عم ع نهد 


منرم عومويت ين 6 ساسس وبر ص © 

5م بزداموتك ”يا ؛ 

5اماك مدط مغ بزهاموتك هر 
عتم وها كي أ 

ورم لمعم عرمموا 


عنام لامع مع عرمموا سيد 


111111111 
3 


كاقعامعم ممع يا 

5اما ع3 و 
اهطماو بعفوتوعر 
وترهمة ومها بعموزوعر 
اولة عولة تعتونوعر 


لقالا ءعثاة برط معرعه أ عمو كعامناو عأوقم سمه سدم بوم 
ع تاصنم معامنو توق 
عق طبرو تعؤمناو عأوقدم 
اك عاطفدع 
ولهوامن 516 بي ١‏ سدع نمه حي مسن تسرام عه بعرت جحانيت رب جر مسيية 
معمه؟ ابن سواه يي 

عدداءم: لبن بروزاح أمر يجب تعديلها حسب طلب النظام وستقوم بتغيير الاعدادات الخاصة بوعمعمع بإدامودذ0 وازالة 

م0 كما قى الصورة: 


كمه تكمعهه ميرم 
تمتتمهم [ 
وملعم ميرم [ 


ع 
2 
كعءايمع5 اله 5:54 ح 

كعءايمع5 ال مهغ5 
عع ابمع؟ الظ هاعم 


زك]ي»اء 6 » 


اللا 


58 | كق>.. العربية (اليمن) |[كزه وو مجتلا7ج 1 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا لانالانا 


أعاءهأم حاعع]©0]أ :اتهمطع 2 /2:00967 ١/08١1‏ 


11" 
نعود للصفحة للنظام ثم نضغط على الزر (إعادة الفحص) على اليسار أعلى الصفحة وستظهر الصفحة كما في الصورة : 


- نف 5 7 © «« ل #ه مه الهكماعمم ع بيع تي تمطامءعء لم ت/رمه ها لمكم /2.5دادومهز/)دمطاهها ذا ١‏ © ع4 


0 0013ل التثبيت "إامعهه 121 


خط ا سقيدا فحص ما قبل التثبيت 69 يعد ة نص | | © سيق| اب ©) 


فحص ماقبل التنييت من أجل 1/17 © 14:00 2014-!1مره-30 [ +8 ] 53016 2.5.20 !ةالرهمل: 


إذا كان أي من هذه المناصر غير مدعوم "أي غير متوفر” سيكون مكتوب 


باللون الأحمر (لا) عتدها يرجى القيام بالإجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 -< هنزم تعم 
210 القيام بذلك يمكن أن تؤدي إلى عدم تثبيت نظام جوملا! بشكل صحيح. دعم الضغط باسكتدام خاضية 2369 صر 
دعم لغة التوصيف الموسعة اللا تعم 
د عم 0 بعر 
استخدام لغة افتراضية متعددة وحدات البايت (#اناه؟ع0 أ عوهدومها 0/8 نعم 
5: تهيئة 10] إيقاف التحميل الزائد للسلسة متعددة وحدات البايت 010 0دما/ع0 5109 0/18 نعم 
دعم محلل 1/1 نعم 
6 : الإعدادات الرئيسية دعم 25010 نعم 
مام.800م "ناو مه قابل للكتابة نعم 
7: الإنهاء 
الإعدادات التي يقصح يها: 
هذه إعدادات 610 التى يتصح بها من أجل ضمان التواقق التام مع نظام 8 
جوملا! التوجيهات يتصح بها حالياً 
ومع ذلك سوف يعمل نظام جوملا! حتى لو كانت الاعدادات غيز متطابقة مع الوم اماد (عقتدهة عدج بطل ا يعمل 
التاق عرض الأخطاء (6705 هاما الايسفل الا يعمل 
رفع الملفات (205مامنا 16ع) يعمل يعمل 
زمن تشغيل الاقتباسات السحربة (6806 5عؤمبان عنوه/0) الايعمل لا يعمل 
65 معامدن عنوهانا الايعمل الا يعمل 
اتتسجيل العام (واةداما6 /8ؤواوع8) لا يعمل لا يعمل 
تخزين المخرجات (و(اع/]ن8 أداجال0) لا يعمل الا يعمل 
بدء الجلسة بشكل ألى 580 مأنش 0مددع5) لا يعمل الا يعمل 
توفرة 218 خاصية فك الملفات المضغوطة يعمل يعمل 


83 برنامج "حر مفتوح المصدر” تم طرحه بموجب 610/601 رخصة جنو العمومية. 


كما نلاحظ الصورة أعلاه لم يعد هناك أي تنبيه باللون الأحمر لذا نواصل التركيب ونعمل كليك على (التالي) وستظهر الاتفاقية الخاصة بجوملا نعمل كليك 
على الزر (التالي) وستظهر الصفحة التالية: 


> ذه عا 72 5 1 6 0-5 و 8 المأكماعمم ح بيع أا/خمطامعع لم ت/رمه ةق المخكما/32.5امرمه ز/أكمطاةءه| 5 ٠‏ © ىو 


.2 !0013ل التثبيت 


اخطلوات التنتسيب تهيئة قاعدة البيانات © سين) إسم © 


إعدادات الإتصال 


المواقع التى تستخدم نظام جوملا! تقوم بتخزين كاقة البياتات الخاصة الإحدادات الأساسية 
7ض بالموقع فى قاعدة بيانات. هذه الشاة تعطى برنامج ١‏ المعلومات 
3 : الترخيص اللازمة لأنشاء قاعدة البيانات هذه. توع قاعدة البياتات * 
هنه على الأرجج “94/501 
هذه على الأرجح "7150/1 
4 : تهيئة قاعدة البيات إذا كتت تقوم بتقبيت جوملا!! على خاذم الويب البعيد (السيرقر الحقيقى). الوكلاالا ؟* 
9 ستحتاج للحصول على هذة المعلومات من قبل سيرقر الاستضافة, 0 2 
2 هذا عادة يكو " 1 
20 بعض سيرقرات الاستضافة تنطلب إنشاء قاعدة البيانات قبل تتصيب جوملا!. 4 وطاقع0| هذا عادة يكون “)عه ادم 
5 : تهينة 10] إذا ظهرت لك الرسالة التالية ” تعذر الاتصال بقاعدة البانات”: قم بالتحقق من 
أن اسم المستخدم وكلمة المرور صحيحتين: وفى حال استمرت هذه اسم المستخدم * 
6 : الإعدادات الرئيسية الرسالة بالظهورء قم بالتأكد من سيرفر الاستضافة الخاص بك لمعرفة ما إذا ده نل "7004 أو اسمر مستخدم محدد من قبل سيرقر الاستضافة 


كنت بحاجة الإنشاء قاعدة البيانات قبل تتصيب جوملا! 
كلمة مرور قاعدة البيانات 


7: الإنهاء إنا استخدا مكلمة مرور خاصة بحساب /7/59/ يعتبر إلزاهى هن أجل حماية وأمان الموقع 


اسمر قاعدة البياتات * 
يي 


المفردات الرئيسية للموقع بينها 


بادئة الجداول * 
5 ليك 


عمليات قواعد البيانات القديمة * 


() التسح الاحتياطى مر استيدال جميع جداول النسخ الاحتياطى الخاصة جوملا! السابق 
إزالة 


13© برنامج "حر مفتوح المصدر” تم طرحه بموجب 0/681١/ا6‏ رخصة جنو العموهية. 


نلاحظ البيانات المطلوبة أعلاهء نترك الخيار الأول كما هو الخيار الثاني وهو اسم السرفر الذي سيحوي الموقع الالكتروني .اسم المستخدم وهي تخص 
مستخدم قاعدة البيانات بالإضافة الى كلمة المرور. قاعدة البيانات وضعنا 1001212 وهي اسم قاعدة البيانات التي سنركب عليها نظام جوملا ويجب ان 


تقوم بعملها مسبقا. بادئة الجدول نتركها كما هي وهي أحد وسائل الحماية لقاعدة البيانات. ثم نواصل ونقوم بعمل كليك على (التالي) وستظهر بعد عملية 
الاتصال الصفحة التالية: 


م 0 /00967 :عا اا8 اا 
ع طا.0 آم حاععغ. نا نالا لاا 


أعراءهأم حاعع]©0]طأ :اتهمطع 2 /2:00967 ٠/08١1‏ 


"ه٠.‎ 


0 00113 ل التثبيت | 
حطوات لشصت تهينة م7 (555*) 
1 : اختيار اللغة 


تهينة 278] (اختياري - معظم المستخدمين يمكتهم تخطي هذه الخطوة - اضغط "التالي" للتخطي) 


2 : قحص ما قبل التثبيت 


مع بعض سيرفرات الاستضافة من الممكن أن تحناج إلى حساب 18 من الإعدادات الأساسية 
00 إتمام عملية تتصيب جوملا!, فى حال واجهتك صعوبات بعملية إتمام 
3 : الترخيص التتصيب بدون حساب 18, راجع مزود الاستضافة الخاصة بموقعك للتأكد خاصية 278 > » 
من ضرورية هذا الإجراء. إل خاصيا 8 
. 8 7 تحذير! من المستحسن ترك هذا قارغاً وإدخال اسم مستخدم حساب 77> فى كل مرة 
من أجل حماية وأمان جوملا!, يفضل أن تقوم بإنشاء حساب 18 متقصل مع اير مس عكدور تقومر بها ينقل الملفات 
صلاحية تقتصر على الوصول إلى تنصيب جوملا إفقط وليس كامل الموقع. رك هذا فارغاً وإدخال كلمة مرور حساب 17 قى كل هرة تقوم 
5: تهيئة مجع مزود الاستضافة الخاص بموقعك يمكنه أن يساعدك فى هذا الأمر. كلمة مرور 78 0 ل لع اي د ا ع ا لي رو 
الاحظ ذَلك: فى حال كتت تقوم بتنصيب جوملا! على سيرقر ويتدوز, فإن 
يي خاصية 218 غير مطلوبة. الا 
إيجاد تثقائى لمسار 210 | | التحقق من إعدادات بروتوكول نقل الملنات 270 | 
7: الإجهاء 
الإعدادات المتقدمة ٠‏ 
5 
20 و 5 057 م زوم 
٠.‏ 
ايضا نقوم بعمل كليك على (التالي) وستظهر الصورة التالية: 
- و كل أبى : 0 : 5 ” 
0ل ها ففه 2 2 “مي جا لع ©# ؟ #اامأكماعمم - نيع يخم طامعع لم ت/رمههاامأكما/22.5ادرمهز/كهطاهه| 5 | © لي 
ا م 5 وم 
0 001113 ل التثبيت إواحهه 2 
اختلوات اللتسيب الإعدادات الرئيسية © سين) سي © 
1 : اختيار اللقة 
اسم الموقع 
2 : فحص ما قبل التثبيت أدخل اسم الموقع. _ آذآ 
إختياري: يمكنك ايضاً إدخال البيانات الوصفية والكلمات المفتاحية الخاصة الإحدادات الأساسية 
3 الترخيه بالموقع . 7 -5 
اسم الموقع أرواد التكنتولوجيا | )21008 '[0 
4 : تهيئة قاحدة البيانات الإحدادات المتقدمة - إختياري ٠‏ 
5: تهينة م[ 
3 تأكيد البريد الإلكتروتي وكلمة العرور لحساب العدير. 
6 : الإعدادات الرئيسية 
أدخل بريدك الالكتروتى. والذي سيكون البريد الالكترونى الخاص بالمدير 
: الانها العام للموقع (01053000لم8 ,عمدا5). 35 
0 دخل كلمة مرور جديدة تم قم بتأكيدها قى الحقل المناسب. يمكنك تعيب بريدك الإلكتروتى «ممع .انهجو 8 1؟نادنا/ابمع 
اسم المستخدم الاقتراضى (ينصح به بشدة من أجل الحماية والأمان) 
2013310 . وهما سيكونان اسم المستخدم وكلمة المرور الذين اسم مستخدم المدير * 2001 
ستستخدمهما للدخول إلى لوحة التحكم المدير فى بعد الإتتهاء من عملية 
. 3 كلمة مرور مدير الموقع * مممممفمقة 
إذا كنت تقوم الترقية من نسخة سابقة, يمكنك تجاهل هذا القسم. 
الإعدادات الحالية سيتم ترقيتها تلقائياً. ا 2 وعم 
9 د 
0 تحميل الييانات التمودجيه 
هام!: نتصح بشدة جمبع مستخدمى جوملا! الجدد القيام بتنصيب البيانات . 50 1 
التموذجية. للقيام بهذا اضغط على الزر السابق الاتقال إلى المرحلة البيانات التموذجية (68) الهدونة باللغة الانكليزية 
القالية. مجموعة البياتات التموذجية البيانات التموذجية (68) للتشرة باللغة الانكليزية 
© البياتات التموذجية (68) باللغة الانكليزية 
1- البيانات النموذحية: قبل مغادرة التنصيب, يمكنك ملء قاعدة بيانات 2 9 
الموقع بالبيانات. توجد طريقتين لعمل ذلك:. 7 7 
تم تنصيب البيانات التموذجية ينجاج! 
1.- البيانات النموذحية الافتراضية يمكن أن تستخدم. للقيام بهذا, 7 
البيانات التموذجية باللغة الاتكليزية الاقنراضية(68) موجودة فى القائمة النمودجية والذي تمر تضمينه قى 
المنسدلة: ثم اضغط على زر تنصيب البيانات التموذجية الاقتراضية. 
2- البيانات النموذحية الخاصة يمكن ان تستخدم. للقيان بهذا, قم 
كد باختياد بيانات تمهدحية متاحة م القاثمة المتسدلة: اضغط عله , ذد تتصبب 


من خلال الصفحة أعلاه نقوم بتعبئة البيانات الحقل الأول (اسم الموقع) ونكتب فيه اسم الموقع الذي نريده ثم ننتقل للمجموعة الحقول التالية ونكتب 
(بريد الكتروني) أي بريد خاص بنا. ثم (اسم مستخدم المدير) وهو الاسم المهم وهو اسم تسجيل الدخول للمدير ثم كلمة المرور مرتين. 


في الجزء (مجموعة البيانات النموذجية) وفيه نقوم بالضغط على زر (تنصيب البيانات النموذجية) وهي بيانات افتراضية موجودة ضمن نظام جوملا. ثم 
نضغط على (التالي) وستظهر الصفحة التالية: 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا لانالانا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


اه" 


0 0011131 التثبيت 'إعاحمهلر 
خطوات التنصيب الإنهاء 72 السرقع ١‏ 8 المير 
1 : اختيار اللغة 


ميروك! لقد تم تتصيب تظام جوملا! يتجاح. 


انقر على زر "الموقع” لمشاهدة موقعك بنظام جوملا!: أو على زر ”الإدارة" 
للإتتقال إلى صفحة دخول الإدارة. 

على موقع مجتمع جوملا! (/0000115 !100013): سوف تجد لائحة روابط 
لحزم اللغات المتوفرة وكذلك روابط للموارد المتعلقة باللغات في عائلة 
مواقع ومه.ةاوممز. 

اضغط على الزر الموجود على اليمين لفتح موقع مجتمع جوملا! قي تاقذة 
متصفح جديدة 


هام بحداً... من أبحل إكمال عملية التنصيب. 
يجب عليك القيام بإزالة مجلد التنصيب "1056181100" بشكل كامل. 
لن يمكنك الوصول إلى أبعد من هذه النقطة إلا بعد إزالة مجلد التنصيب. 
هذا من احل حماية وأمان حوملا! 


7 الإتهاء 710 


تقاصيل تسجيل دخول الإدارة 


5: تهينة م1 


6: الإعدادات الرئيسية 


اسم المستخدم لقاعدة البيانات : 201310 


حوملا! بلغتك الأم؟ 
قم بزيارة موقع مجدمع جوملا! (/0010100116© !100713) لتنزيل حزم اللغات 


13 © برتامج "حر مفتوح المصدر*" تم طرحه بموجب 621/لالاا رخصة جنو العمومية. 


نقوم بالضغط على (يرجى إزالة مجلد التنصيب) ننتظر الى ان يتم ازالة المجلد وتأتينا رسالة من الزر نفسة (لقد تمت إزالة مجلد التنصيب) ثم نفتح 
نافذتين واحدة للزر (الموقع) والثانية ل(المدير) 


سيظهر الموقع كما في الصورة: 


2 ته 5 7 © خخ له خي أب /0132.5مه[/)دهطاق ها 5] ٠‏ © 


.5680610 'عالقتمع 5‏ تعفعظ ‏ ععوول8 عداو غممع 


.0018ل 515 عاطالامة اننا 


'إواصههلم 


أمعجمعو2 لهالا مع مم0 ععسم5 معم0 


عموطما :ممع عمق ناملا 


إةالومهل ةالدمهه[غدمطم 


غ معم)! 300 غأ أمقننا ناميا بزهننا 1 أكباز عأأد6ع 3 لاأناه 6غ لإقوع غئأ 3/65 13ىمممل إعئأد قالوممل 3 عن نولا !كمه ةنا أقومه) 5360 وونماء 


310310 300 8غولمن 0غ عامماد 
!امهل ووأونا 
؟ه 07805مناط طلاين عغته عوط ع عه ادنم بز ,ها عازة الهجمد 3 ومتةائنه عن نامز ,ع طاعطاننا ,هتدام ابقعهمم مد عاطمرع8 خ 5ز واممل 
! 
0غ ]1 ةللا نامل[ /إقثها 118 أكناز ]ملالا 1 213/68 لقع ناملا 835 لأعانانها ,عع]نام5 معمه 15 0013ل 5مغأذأنا أه 53005نام! ع زه !وادوومل 196 


نادمه لقامومل ع1 


أع طا.0 أ حر حاععغ. انا نانا ثانا 


5ألةمةأووع6مم 


أمعممماع ع0 كع نامتاممء 2.5 !امول 
5 0مة عارمااعمقط قالوممل عط أه 
0غ نزهنلا عاطتكاء11 300 اناأع/لامم 3 25 
0غ طاعننا ع1 أ0 ناذأ )ناملا ووامط 

الا00 5301 أواح30 عط حلغالالا._ اهعم 


65 مما 


!وول لععمع عم مق ع3 نمتلا 
ع8 5 البلا علد 3اوممل ذلطا ,)عون 1.5 
للاعم 368 عمع11 .32 ااتموة؟ رمعي 

)عدن 101/60م122 300 3465امممع1 

5 اال همه ناعللا أومم أناط ,دمع وأ عام 


أعجا.ه أمحاعع]0©1]أ :اأهمع 


5معصماعوء8 


]0 5116 !3اصمممل 5,56 )نامز 5 ولط 6 
8ع 131/8 ناملا ,18ز5 معنلا 1151 ناملا 
ماع الأبنا واصوممل ععقام ول عذاا 16 

119 300 منا ع6أ5مع/لا إناملا أعو ناملا 
/1ااعةع 300 /الكاعاناو 


نا 


تلننكنا 
مدااا 51 


متصم ا 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عااا8 ولا 


صفحة لوحة التحكم كما في الصورة: 


5 فته عله 27 5 اج عه شه مد /07 5/0 امرمو]ز/أووطاهه0| ذا | © جه » 


8111 


أنه ا ه521 المتاصلكم !داصسرممل 


651100 300 عتمقممع5ن لنلقلا ‏ 58لا 
؟0أقأوأم0ة 0 ما 55عمع8 وأهو 10 


13 )عدنا لمعيه 
وهم 06هة عه ما 60 
50 
؟ 4انمهاع2 13039 " 
© «نوما 


معنا عناطنام نقمعمع6 لالت عط عع0من معووعاع, ع82 مد ع8؟ وز هلماووول 


تعريب نظام جوملا 


قبل البدء بالتعريب نقوم بتنزيل ملف اللغة العربية من موقع جوملا الرسمي من خلال الرابط التالي: 


13-]221:25_10_كنتآعت ع6/11:5/72201011-11:5121625151:01715_ 35351210111" ز/اع» ز0غام ملع :01. 012112200 0[// : ماخط 


بعد الدخول على الرابط ستظهر الصفحة التالية: 


مم5ك | أعمماءنه0 | 5800معمبعه0 | كممتكمعقيع | نومع | لإأآمسصمحممه | عادصمممزضسمطة | عرممنر 


"علو حواصون1ل 57 


: ع( ع 6ج مع زج طفءمعههمم 
أانامع36 الاعم يعأكلوععم | مزوما - 9 ٠:‏ كماع ممام5 (عوع 5‏ و5نعولا نط5 بزثز عونم 


عدمعاعم دبع عوده8 « قف]ة وضاتدنا عنطمرة < ععدمعاععة « عدمتاةاددةم1 لع فعوءة 82.5 اقاصموة + عععزمرع < عرولط نامعل أممزورم 


ا كصةه؟ لع الع ع8 182.5دامره 30‏ 50307 ١‏ 
ا 600000 << 
2150 © 323.25 2.5.9120 اانه ومها_قادمه1 قفمة 17:00:00-6 2013-02-03 9 هقرة وهاتونا عتطميق ادنلا ودددوية د 
12631 8 325.34 .2.5.81 اانة ومها قاودهز ففمع 2012-11-08 8 ققمة وماتدنا عتطاصة 022222222 
841 8 285.13 5.201.210 انة ومها هادسمه1 ققد :8 2014-04-29 20 هقدنة وهاتونا عتطديق لحشك اا نه 
6531 8 323.94 2.5.191/1.20 _اآنة ومها فاومهز شفع 2014-03-05 29 ققعد وداتونا عتطديم و8 2 
4495 8 323.76 2.5.18/1.20 انق ومها فاودهز شفع 17:00:00-06 2014-02-06 25.18 شق-ءد وداتونا عتطهيم ممحافقة: + 
5869 8 323.84 مزه. 2.5.1711 انق ومها قاأدومهز شفاد 17:00:00-6 2013-12-18 7 شكق-ءة وداتونا عتطميم 
3249 8 323.61 2.5.161/1.20 _اانة ومها قادومهرز قفد و ع جاوويت تيعو ل لون يه الاك << 
32861 8 323.84 مز.2.5.16/2 انق ومها قادوممز فقئة وو كز 
11849 68 323.62 2.5.131/1.22 انة ومها قادودمه1 شفاد 18:00:00-5 2013-07-25 3 شقنة ودذاتونا عتطمهيه 
14389 8 323.48 20. 2.5.1111 انق ومها قاومهز شفع 18:00:00-5 2013-04-26 1 8شظ-ىد وداتونا عتطمهيتم 
1231 ©3225 0000-5 2013-04-23 0 هفءة وهاتونا عتطميم 0012 
472 © 295.22 .2.5.13 انه ومها قاصدهز شقمة لاط 051109 
11979 8 325.16 2.5.7112 انق وها فادومه1 شفع حصو 
1155 18 880.41 .2.5.511 اانة ومها قاودهز ففمع 18:00:00-05 2012-09-19 25 قك-ءة وذاتونا عتطدعم برع برع 080 
4716 18 285.1 .2.5.411 آأنة ومها قاومهز ففع لاع لاا 
5228 8 300.85 1 2.5.61/1 انق ومها هاومهز شفع 


من خلال الصورة أعلاه نقوم بتنزيل الملف المضغوط للغة العربية باختيار أي نسخة ولتكن آخر نسخة المضللة ونضغط على ذلك الملف وسيتم تنزيا 
الملف المضغوط. 


0 /00967 :ع |ا8 ١/0‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


أع طا.0 أ حر حاععغ. نا لانا نالا 


من خلال لوحة التحكم نقوم بالدخول باسم المستخدم 0:01 وكلمة المرور التي عيناها مسبقا وسيتم فتح لوحة التحكم التالية: 


81110100 


اناه وما (0 عاك سوا ل 0 تع منصنك 1 لله 0/605 لله ماعاز ‏ عممتعمعفظ | م أمعوممممء | +معلممء | وسمعاز ‏ ديعولا عازك 
5معلا متذلعووها 5 ١854‏ + 9 1 1 2 
أناهوه] افاعم ادها 0 ممتأهعه | عمقلا كك [+) 
5 2014-05-0 19 0050م 56لا معمناة ععوقمقا! نامعانا ععوقمقاا قتع ارا 6ع وقمة ارا بمموع افع 308966 عاعتايم عاعتاتك ١/6‏ لقم 


5عاعءناءة عروانسمهه 5 مه1 <١‏ 
وعاعتظ 0ع200 5 وها ١‏ 


امناةسوقممع اهطمات ١‏ )عوقمقاا عوقناومها عوقمقا! ممتعمعمع ععوقمقاا عانهماا ععوهمهاا عونا 
١‏ 3 
0 لللا 
لمن ع6ة 05متومعع اله | 016-ممن 5آ أقاووول تا ععوقمقا! عتقاموع17 


10-01 


0 إقاومول 


.عسمععنا علاطنه اقععوعة) نالا عط عع0من لعهوعاع؟ عق وى عع وز لووول 


من خلال الصورة أعلاه نقوم بالضغط على (:ءع 1121128 ددوؤودمء)172) ووظيفتها اضافة اي اضافات للنظام وسيتم فتح الصفحة التالية : 


الهاذص!ا :1130301 «مأعمعماع 


5ع0دناومه! الماكما 1005لمةلالا 023525 0150 1/1220 لمنلا القاكما 


عان؟ عوواءعج2 0دماملا 
ااقثقما ج 4ددامنا معومك ه11 هل( | ماع عومورع). ماع موهاموم 


لماععزأنا دممع] الماكما 


الهاوما مم5 2داصمعزامصصادمدساع .لمعأ الهأكما 


اانا ممع الماكما 


الهثقما مقط اانا الهادما 


من خلال الخيار (»1511 ©22612286) من خلال الزر (15116 ©212005) نقوم بعمل كليك عليه وسيتم فتح النافذة ومن خلالها نذهب لملف اللغة الذي قمنا 
بتنزيله والضغط على الزر المقابل (1254211 © 101020]) وستظهر الرسالة التالية: 


5ع3000020! الهأاكوا 11105 الا 022025 عام 015 1/1220 ع2لم0 الهأاكما 


.اناد دسعععناد هقنما عوهكاعهم وو االقاكما 6 


حرمة اللعة العربية الموحدة لنظام جوملا! 2.5.10 الاصدار 1 

1 6151017/ 2.5.10 !01713هل ه10 06 3كاء23 3700306 ا 1130انا عأطورطظ 

المعتمد في جوملا! 2.5 3 110[/1/1058 تم يتجاح تتصيب حزمة اللغة العريية للمحرر 

1101/1100 -في خانة اللغة حند ادارة التطبيق المساحد المحرر ]3 تذكر أنه من الواجب الخال كود اللغة العربية 
عاأء عوواعجط 30مامنا 


الهاعما 2 4هدامنا معومك ع8 هلا | مااع عوممكك | 6118 536898 


ا 0 /00967 :عا اا8 اا 
ع طا.0 آم حاععغ. نا نالا ناا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /00967 :2 ااا كلا 


١ 


نقوم بالرجوع للوحة التحكم من خلال (72261 024101© - 58146) ومن خلال لوحة التحكم نقوم بالدخول على (712128©1 ©1,3281125) كما في 
الضورة: 


امه 21 م8 


اناه وما 0 ع5 باعانا 89 0 كع منومه 1١‏ 5 5مثلوالا 0 05 ماعلا كمه اسمعامع كمع مم6 ع 060001 5نامع الا 5ع 5لا 51 
8 أسصست . مه 85 
5عولا 0نلعووم ا 5 غ85١‏ + 9 0 ا ح --- 2 
ل 2 م- 
أناموه 1 االقاعة أكعها زننا ومهمعه ٠‏ 13 السك - [+ 
3 2014-05-04 19 5340نم ملم ,5ن ,عمد »عوقمقا! نامعانا ؟عوقمةارا قالع انا »9ق0قا/ا بمموعاوة )عوقمةا/ا عاءعنايم عاعنامم بازع|١‏ 00م 


5عاعناءة انمه 5 مه1 <١‏ 


وعاعنارظ ل0ع200 5 أكها < 
اللسليم 
26 © - 35 


ممق ناوا ممع أهمهات 130896 عوقناومقا ععوقمهاا ممتعمعمع ععوقمقانا عان104/ ع وقمقاا عونا 
رف 
27 010لا 
-منا عق 5لمأكمع تزع الخ ع031-ممنا 5 008ل عالقممم الع “عوهمةارا عثقاممع1 
10-0816 
0 م اوسلو ا نك 
3 
وستظهر الصورة التالية: 
01611065 م011 5153101 التورلة - لعالماكما 51 - لعالهادما 
اتقومع «ملطأسم مانام 086 160ىمعلا 4اننوقء0 «ومتأهء0 1 130 عنقناومها 8001130 ا سل 
6019 031أ0 )486 بلع 0ق" / 19مه .9081 13102كق.01.0 أل لاعن هطع صامقكا 300 (ه10!! ناطظلة:08 أقرطعث .02 2 2013 ذعمهارا 28 0” ”25 586 شض)ة (العربية المرحدة) 9189لا عأاهيشر © 1 
.8ه ©3010 ع عزم8 أقاممول 20080315 2519 #و 516 قعمه (000و0! معقونا) مدتاومع ‏ © 2 


أ 0 # برواموام 


من خلال الصفحة السابقة نقوم بالضغط على النجمة أمام اللغة العربية وسيتم تعريب الموقع الرئيسي وستظهر الرسالة التالية: 


011105 أمع 06001 0ك تله - لعالهاكما 511 - لعالهادما 


.0هم قلوه! عطأ ممعه 1118معم عتعطا مه عوقناومها ع(اأععمة ق معدمطء علاقط 1814 دبع5ن أعع]]8 غمم دعمل 1115 .لع5310 ع0دناوم38 ا أأنوقء0 
.عوقناوهها أمعأممن لع ذاىتاطدم د ع6 150 10 885 عوهناومها أانوقع0 5118 5 (لعاطهمع 15 ,ع1 1ع وهناومهقا - جع 1م/ز5 متوسام ع8 معطيه .ع.ا) باالقممناعمن؟ عوهنوصداتااسص ع8 ومتكن معطلالا إأومتدمهالا 


القع ,ملاسم مانام 2346 160ممعلا انلوقع (ومتأهع06 1 130 عوقناودها ع0قناومقا ليراالنا 
«اهت. انقأ0 486 باع وده" / ومع انقو © قرطمة. 0ع قالع ضاعمهممع ماقا 800 1ق10ا! ناطذلة0852 )قلاعم +0 2 2013 (طععهارا 28 2 2.5.10 0 5 057 (العربية المرحدة) 0189لا 81خ 60 1 
019. 820110000113 أععزوءمم لقاومول 2008-03-5 2519 516 68رمع (وملومت! معقونا) مذتاومع 2 © 2 


*“ 20 # بإقامدام 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا لانالانا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


وهة؟ 


وسيظهر الموقع الرئيسي كما في الصورة: 


تلن 515 غعاطالالمد 1/1٠86.‏ 00ل 


'"اواصههلم 


غ303060060 أ أمع مم2 ععسم5 وعم 0 


أنت هتا: 11000 
3 [ ناه طم ! دمرمه!! 
51310 وونتاء 6 مع8)! 300 غ1 04لا ناملا لاقنلا عا أقناز عألومع نا 3 لأأنط 6غ /زققع غأ 3125 13نمممل إعغز5 قالصممل 3 عباوط نولا !كمه 3انأقومه 0 


113(0 300 ]لمن 10 عام0أه 
3 ونأولا! 


05 07805لناطا طثاننا 5158 عوناط 3 عه أأع5نامنز ,5 غئز5 القد55 3 وقثلاأناط 38 نامنز بعتااعلانةا ,7م غدام انطعنلدم 00م3 عاطلاء1 3 ذأ واصدمل 


! 
أععزم2 !داومل 158 0غ ]1 301لا ناملا بقثلا 11 أكناز عأ/منلا )] 51316 3ع نامل[ 2305 تأعأطانلا ,ععناود معمه 15 00013ل 151105 ]0 1010053105 


/لاأتمناحمهمم؟) لجاصممل عطل 


تم تعريب الموقع وظهور بعض الاجزاء معربة جاهزة. ننتقل لتعريب لوحة التحكم ومن خلال الصفحة (71212867 ©1,33281128) و الضغط على 
(2601)وتستدسلك 4 - 125421160 ) وسيتم فتح الصفحة التالية: 


01105 م2001 210كالآلولق - لعالهاكما 5116 - لعالهادما 
اتقمع عمطاسم عماسم 051 ممتومعلا ؛اسوقءم 2 ممتامءم| برسي 30مومة ا مسار 
/ ممه .اتهمو © هعم ا باحاخلة 09 ؟ق عاك .+0 2811 
ل ين انها مه لمفاا! باطذلة5 09 081اد مما 28 0 12206 5006 الرنية حدق وصافونا ديم : 
«مع. القدناه © 486 بيع عقر قلع لاع ممع 2013 7 
.6018 نز 8010 اع عزمم8 لقاو مول 2008-03-15 2519  #‏ عماوااملض 68مع («مفموم)! لعقونا) مدتاومع 2 


5 0 # /زواموام 


وبنفس الطريقة السابقة نقوم بالضغط على النجمة أما اللغة العربية وسيتم تعريب لوحة التحكم وستظهر كما في الصورة: 


الإدارة إواحهه 


الموقع المستخدمين القوانم المحتويات التطبيقات الإضاقات المساعدة 6 لايوجد أعضاء داخل الموقع .كه 1 عضو داخل الإدارة .“| الاتوجد رسائل 8ه معاينة المرقم ([) 
8 : 256 4 
مدير اللغات: اللغات المنصبة و 08 | ++ 
سفت سمه اميه النغات المننسية للوحة التحكد القات المحتوى اسسس 
وهم ولوه! ع8 ممعه ع11لممم عأعطا مه عوقبومها عالاععم5 هق معدمدء عنلهط! 1هطا ديع كنا أعع311 0014 دعه0 1115 ,لع531 عوقناومهقا أأبنواع0. 
لها أمعأممت لعذاهااطنام هق عط ه50اة 10 125 عوقناوقق ا أأنوقع0 5118 15 (لعاطمومع 15 ,ع11قعوقناومهقا - دمع 51ز5 لمأودام ع8 معطا .ع.ا) باالقمم اعون عوددومهقاكانحد ع3 ومتكن معطلالا إومتممعهالا. 
أرقام اللغة كود اللقة المكان الافتراضي ١‏ النتسخة تاريخ الإنضاء المؤلف البريد الإلكتروني للمؤلف 
1 89 عأطهءم (العربية الموحدة) ششعع النير # | 2510 283 2013 تتعقاا قالع داع مقطمء مقا 0مه زق10ا! باطقلة) 08 أقعطعث 0 «مء .انق جنات ©4866 بتع ممنقى / لمع .انقو ©581كه. 0 ,0 
2 دفوم معاتونا) طمتاومع) 68م المدير 9 25 2008-03-5 عزوم لقلورمول وه موز © مم80 


عدد أسطر اللائحة: | 20 * 


0 إلقالومول 


ا 0 /00967 :عا اا8 اا 
أع طا.0 أ حر حاععغ. انا نالا ناا 


أعاءه أمحاعع]©0]مأ :اهمع 2 00967 :2 عااا8 ولا 


نعود للوحة التحكم من خلال (الموقع - لوحة التحكم ) وستظهر لوحة التحكم كما في الصورة معربة وجاهزة: 


الإدارة "إوادهه 121 


الموقع | المستخدمين ١‏ القوائم ١‏ المحتويات ١‏ التطبيقات -. الإضاقات ١‏ المساعدة ال الايوجد أعضاء داخل الموقع 2 1 عضو داخل الإدارة ‏ “خا) الاتوجد رسائل 8ه معايتة الموقم ([© تسجيل خروج 


2 2 27 فل «تمةاسةساسيدسد 
6 #قلة الاسم المكان ارقم التعريقف التشاط الأخير تسجيل الخروج 


ير الوسائط المتعددة مدير القوائم مدير الستخدمين معدلا معمن5 المدير 19 2014-05-4 17:25:07 


> أكثر 5 مقالات قراءة 


- © »عت > هم د 


الإعدادات العامة مدير القوالب تعديل العلف الشخصي 


520 لقاتومول 


من خلال لوحة التحكم ندير محتوى الموقع كامل سواء أجزاء المواقع واعداداتها وكذلك شكل الموقع والتحكم بكل جزء فيه وهنا نظرة عامة حول كل 
أيقونة في لوحة التحكم حسب الترقيم وكما في الصورة: 


الموتع للخم القوائح النصريات التطبيقات الإضافات المساحدة 


51 2< 83 24 55 06ل 


إضافة مقال جديد مدير المقالات مدير المجموعات 


012 211 20 6589 838 >7 


هذير الموذيولات هذير لاضافات مدير اللغات الاعذادات العامة هذير القوالب تعذيل سس للحص يو 
لديك آخر نسخة هن جوهلا! لديك آخر اصدار من كل 
الإضافات 


(إضافة مقال جديد) : من هنا يمكننا إضافة أي خبر أو بيانات لأي قسم. 


(مدير المقالات): من خلالها يتم الدخول إلى جميع الأخبار أو المقالات المضافة في حالة اردنا التعديل أو الحذف. 


ا 0 /00967 :ع |ا8 ١/0‏ 
ا ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


ده" 
(مدير المجموعات) : من هنا نقوم بعمل القسم وتسمى في جوملا(مجموعة). 
(مدير الوسائط): من خلاله نتحكم بالمجلدات والصور في مجلد (و12286). 
(مدير القوائم) : نتحكم بالقوائم الموجودة من هنا. 
(مدير المستخدمين) : نتحكم بالمستخدمين من هنا نقوم بالإضافة والتعديل والحذف والايقاف. 
(مدير الموديولات) : الموديولات هي أجزاء الموقع ونتحكم بها من هذه الأيقونة نستطيع تحديد أماكنها ومن أين تستمد بياناتها. 


(مدير الاضافات) : جوملا تقبل أي إضافة سواء موديولات او مكونات او اضافات مساعدة وعن طريق هذه الايقونة ندخل للصفحة التي تقوم بإضافة 


الإضافات وتركيبها. 
(مدير اللغات): نتحكم باللغات للموقع ونستطيع تعيين اللغة التي نريدها للموقع وللوحة التحكم. 
(الإعدادات العامة): نتحكم بالإعدادات العامة للموقع مثل (اتصال قاعدة البيانات - اسم الموقع العام - ايقاف الموقع .. الخ ). 
(مدير القوالب) : نحصل على قوالب جميلة من مواقع تدعم جوملا ومن هنا نقوم بعملية التعديل والتعيين للقالب على الموقع. 
(تعديل الملف الشخصي): وهذه الايقونة خاصة بمدير الموقع لتغيير اعدادات حسابه. 
(لديك آخر نسخة من جوملا!) هنا تظهر هذه الرسالة عندما تكون جوملا لديك آخر اصدار وعند وجود تحديث جديد ستتغير باللون الأحمر (تنبيه). 


(لديك آخر اصدار من كل الاضافات) تظهر عنا عدد الاضافات التي تكون بحاجة لتحديث ويفضل عدم تحديث الاضافات غالباً. 
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8 عو 


إنشاء الأقسام 

في أي موقع إلكتروني لابد من وجود جداول خاص البيانات هنا في جوملا الأمر سهل جدا ويمكننا إنشاء الجداول بالمعني البرمجي ولكن في جوملا تقوم 
بعملها يدويا وتحدد اسم الجدول فقط فمثلا سنقوم وكمثال نقوم بإنشاء أقسام (قسم تصميم الموقع - قسم الجرافكس - قسم الشبكات والصيانة ‏ عام - 
خدماتنا ) والخطوات كالتالي: 


من لوحة التحكم نختار (مدير المجموعات) وستظهر الصورة التالية. 


م مدير المجموعات: المقالات © 


تعديل إلقاء التشر | الأرشيف القحص <- حذف إعادة بناء الخيارات | الساعد: 
المقالات المجموحات المقالات المتميز 
ف 0 إعادة التعيين اختيار أعلى حد للوصول  -‏ اختيار العالة - _ ” | | - اختيار مستوى الوصول - اختيار اللغة - | " 
الاسم الحالة كم الترتيب اخ .مستوى الوصول اللقة َم التعريق 
5هاء ناف 033 1م5300 
3 1 الأمانام الحبع 1 
) وعأاعناءة-مأقل-عامرروة) 9 امنا" 
0013 
ِ ) ماهم تا 1 3 عنام الجميع 19 
0 
يتا 
1 عاامانام البميج 20 
) 5ومتعمعامع) 9 عتاطان ع 0 
5أم0 0م00 
7 قاع وموم ) 9 1 9 علامانام الجميع 1 
5عاناكهانا 
© 2 نكا مانام قينهها 
) 5عان4مم) 
5غ اناكهاا أمعاممن 
© 1 9 عأامانم الجميع 64 


ستعاز: وعان00-وعاءعتا,ق) 


كما نلاحظ في الصورة اعلاه هذه ادارة المجموعات أو الأقسام ونلاحظ الأقسام الموجودة مسبقا (بيانات تجريبية) نقوم الان بعملية الحذف والتأشير كما 
في الصورة على (0001212) ثم الضغط على أيقونة الحذف أعلاه. ونقوم بحذف جميع المجموعات أو الأقسام الى يصير لدينا قسم واحد وهو كما في 
الصورة. 


المقالات المجموحات المقالات المتميزة 


و ؟ ترنتل السجموعة الى سلة المحذرقات يتجاح 


الفلتر: البحث إعادة التعيين اخقيار أعلى حد لوصول * اختيار الحالة  -‏ * اغقيان مستوى الوصول - 3 اختيار اللغة - 2 * 
الاسم الحالة 005 الترميباج مستوى الوصول اللغة رقم التعريف 
الاك 
9 إزت 1 علامانام الجميع 


م الستعار: 6818901880 0نا) 


عدد أمطر اللائحة: | 20 | * 
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ولعمل الأقسام التي نريدها نقوم بعمل كليك على الأيقونة البرتقالية أعلاه (جديد) وسيتم فتح الصفحة التالية : 


'إوالصحه 12 


الموقع. ١‏ المستخدمين القوانم ٠‏ المحتويات التطبيقات | الإضاقات | المساعدة الايوجد أعضاء داخل الموقح .كه 1 عضو داخل الإدارة . “خا) لاتوجد رسائل 88 معايتة الموقح 9[ تسجيل خروج 


ع مدير المجموعات: إضافة مجموعة جديدة ىه 0 كا © 56 


احقظ وإغلاق ١‏ حفظ وجديد 


8 ظأظإ 4 خيارات النشر 
الاسم * تصميم المواقع الإلكترونية 4 الخيارات الأساسية 
الاسم المستعار موأقع ممع ب 4 خيارات الكلمات المقتاحية 
لأصل - بنون القناب 3 
الحلة منثور ف 
مستوى الوصول تللدتها , 
التراخيص إتحديدٍالتراخيصصر 
اللغة الجميع .1 
كم التعريف 0 
الوصف 


+ طامهومدم8 + دعابرن5 | 
حم © 27 “2 للك 


كما نلاحظ الصورة أعلاه من هنا نقوم بعمل الأقسام الجديد. من خلا الحقل (الاسم) نقوم بعمل اسم القسمء الحقل الذي يليه (الاسم المستعار) وهو اسم 
الرابط الذي سيظهر على شريط العنوان عند فتح القسم ويمكننا تركه فارغا او كتابة اسم القسم باللغة الانجليزية كما في الصورة. الخيار الذي يليه 
(الأصل) وهنا اذا كنا نريد الان نجعل القسم تحت قسم آخر أو فرع منه مالم نتركه كما هو. 


(الحالة) في حالة اردنا انشاء القسم وجعله مخفي وغير مفعل نقوم باختيار (غير منشور) مالم يكون كما هو عليه (منشور). 

(مستوى الوصول): في حالة اردنا حصر رؤية القسم لفئة معينة في الموقع مثلا المسجلين فقط أو خاص مالم نتركه كما هو. 

(التراخيص) : وهي وضع صلاحيات محددة للمستخدمين. 

(الوصف) : وصف القسم. 

ملاحظة : الحقول التي تكون إلزامية هي المؤشر عليها بالنجمة الحمرا كما في حقل (الاسم) ونكتفي بعمل الاسم فقط . 

بعد عمل القسم أعلاه نقوم بعمل كليك على (حفظ وجديد) وسيتم حفظ القسم التي تم إنشاءه. نقوم بعمل بقية الأقسام بنفس الآلية وسيكون شكل الأقسام 


بعد الانتهاء كما في الصورة: 


مدير المجبوعت: اتاد © © و #09 #89 


المقالات المجموحات المقالات المتميزة 
الفتتر: البحت عادة التم اختيار أعلى حد للوصول _ ” | .| - اختيار الحالة - _ ” | | - اختيار مستوى الوصول - * | | - اختر اللغة - _ * 
الاسم الحالة 5 الترتيباح مستوى الوصول اللفة ١‏ رقم التعريف 
61200 
عملا © 1 إن عتامانام الجميع 
عع موع امع ونا 
تصميم المواقع الإلكترونية 
يم المواقع الإلكتروتي © 2 2 6 علطيام الحميع 
مونوع همع /«) 
تصميم جراقكمر 
يم جرافكس © 3 2 6 علاطانام الجميم 
كعنطمقرو) 
تبكات وصيانة حاسوب 
وصيانة حاسو؛ © 4 تنا عنامانم الجميع 50 
فتلا 
عام © © 6 أحانام الجميع 1 
معو) 
خدماتنا 6 6 علطيام الخبيع 
١‏ مناه 6 


17100 0 00967 :0811 /ا 
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كما نلاحظ أعلاه تم حفظ الأقسام الخاصة. 


التحكم بالمجلدات والصور 
دائما قبل البدء في العمل على جوملا وإضافة البيانات لابد من وجود تنظيم وترتيب لعملية إدخال البيانات كالصور والبانرات وهنا سنقوم 
بعملية ترتيب وعمل مجلدات في نظامنا منها ما هو مخصص للصور ومنها ما هو مخصص للبانرات. 


من لوحة التحكم نقوم بعمل كليك على (مدير الوسائط المتعددة) كما في الصورة: 


5 ادهاج 4ه 


إضافة مقال جديد مدير المقالات مدير المجموعات مدير الوسائط المتعددة مدير القوائم مدير الستخدمين 
مو © مو 204 41 
ستظهر الصورة التالية : 

- 58 . 4 
197 مدير الوسائط المتعددة 5 08 | ++ 
عرض مصقر عرض مقصتل 

المجلدات الملقات 

5 إل 2 25 0 اعييدشن 

كععممدط © 1 
3 [الدذدنعامم 
6 950 7 ع 0 0 99 
5 همع اممو اط_هاومموز ع:ق_قادممول وما_قاومهز برك 5 


في مدير الوسائط نستطيع رفع وحذف أي ملفات وإنشاء مجلدات أيضا لاحظ المجلدات على اليسار سنقوم بحذف الصور التي بجانبها 
بالتأشير عليها ثم الضغط على (حذف). وستظهر كما في الصورة: 


المجلدات الملقات 


0 [السمعمددط : © لك لل 
ت [الدةءامدده 


نقوم بعمل مجلد اسمه 101552014 بالنزول قليلا في نفس الصفحة وكما في الصورة التالية: 


65و 5/13. 22 دممح زا روتام مه ات 000114 لحل وجلا 
رقع الملقات (الحجم الأقصى: 10 1/18) 


| 5عاذ© 5م00 | معدمض عا ملز 


بدء الرقع 
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55 


كما في الصورة أعلاه على اليسار نقوم بعمل اسم المجلد ثم كليك على (إنشاء مجلد) وسيتم إنشاءه بعد إنشاءه نقوم بفتحه ثم عمل مجلد 
آخر بداخله باسم 5-2014 بنفس الطريقة. 


إضافة مقالات 
من أهم الاشياء في نظام جوملا هو كيفية إضافة وهنا ستقوم بعملية إضافة مقال وسيكون لدينا بعض المقالات أو البيانات التي سنضيفها وهي كالتالي: 


" مقالات مع الصورة تحوي الخدمات الرئيسية التي نقدمها وهي (تصميم المواقع - جرافكس - شبكات وصيانة) . نجهز ثلاث صور وعبارات نصية 
وستكون الإضافة بالطريقة التالية: 


من لوحة التحكم كليك على (إضافة مقال جديد) وستظهر الصورة التالية: 


30 ص دف 2 5 1 + 0" 3 يو أألع ع نام/ا3 ايقع 161 - بنع اليق امع 
6 مدير المقالات: إنشاء مقال جديد 
مقال جديد 
الاسم * إتصميم مواقع إلكترونية 
الاسم المستعار اطعن 
المجموعة - خدمتنا آي 
الحالة هنشور ؟ 
مستوى الوصول عذاطيع 7 
التراخيص إتحديد,التراخيص 
مميز الاق 
اللغة الجميع ؟ 
رقم التعريف 0 
تص المقال 
> دامةءوةدم > وعارة5 | 5 3 2 ع | عه 1ن م مه 
م © 7 8ه بل ات صرء» 1225| د ع 
52 ذا | 8 ف ل 
تقوم رواد التكتولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 
وفقا لأحدث التصاميم العالمية والآنيقة واستضافتها على سرفرات ذات كفائة عالية. 
7 مقمة « م نطثوم 


كما في الصورة أعلاه الحقل (الاسم) نضع العنوان المناسب للمقالة أو الخبر أو أي شيء. (الاسم المستعار) كما ذكرنا سابقا الاسم المستعار هو الاسم 
الذي سيظهر في نهاية الرابط ويمكن تسميته بأي اسم باللغة الانجليزية أو ارقام عشوائية او تركه. (المجموعة) وهنا يجب الانتباه عند إضافة أي مقالة 
نختار القسم المناسب لها كما في الصورة اخترنا قسم (خدماتنا). الخيارات في (الحالة) نتركها كما هي عليه (منشور) . الحقل (مستوى الوصول) لو 
اردنا تخصيص المقال للمسجلين مثلا وحصره على مجموعة معينة ويتم تركها كما هي غالبا. (التراخيص) وهي مجموعة الصلاحيات للوصول لهذه 
المقالة من حيث التعديل او الحذف هذه الخاصية لا تستخدم بكثرة وتترك كما هي. 


(مميز) وهذه خاصية تستخدم في بعض القوالب القديمة بحيث يتم عمل زر (إقرا المزيد) في المقالة وتعيينها كمميز وتظهر في الصفحة الرئيسية لكن 


الان يتم ترك الخيار مميز كما هو عليه نظرا لوجود موديولات تقوم بنفس عمله. (نص المقال) وهو الأهم وكما نلاحظ كتبنا مقال معين حول العنوان 
الذي أدخلناه. 
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بألا 


نقوم الآن بإضافة صورة وهو عمل كليك في بداية المقال وانزاله سطرين والعودة الى السطر الأول بمؤشر الفأرة لكي يتم ادراج الصورة في ذلك المكان 


أي في السطر الأول كما في الصورة: 


تص المقال 
- ضمهومدهة ١‏ > وعارن5 | 5 3 2 ع | عه 1 م 8 
١م‏ © 2# 38 بل | 6 9 | ف ع | دو < 


تقوم رواد التكتولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 
وفقا لأحدث التصاميم العالمية والآنيقة واستضافتها على سرفرات ذات كفائة عالية. 


و منطقوم 


إدراج رابط مقال | ) إدراج صورة كح فاصل الصفحات إقراً المزيد ١‏ ,/ تبديل المحرر 


إدراج صورة 


نلاحظ في الصورة اعلاه وجود الزر (إدراج صورة) نقوم بعمل كليك عليها وستظهر النافذة التالية: 


ها 1 
أعلى 


515185 


وععصوقط 00014 38لع م53 


خند اختيار 'بدون تعيين', سيتم تحديد الإصطفاف بواسطة الصنف ((885© 
-1770.". يستخدم عادة لضبط (تمركز)؛ الصورة في مركز الصفحة. 


إذا تم الضيط على 'نعم', سيتم استخذام اسم الصورة كوصف للصورة. 


رقع الملفات (الحجم الأقصى: 10 1:18) 


| معااع عومدضه | معومك 86 6ل 


كما نلاحظ في الصورة أعلاه تظهر المجلدات والمجلد الذي أنشأناه سابقا نقوم بالضغط عليها وسيظهر المجلد الاخر الذي انشأناه والذي هو ٠١١4-5‏ 


نقوم بفتحه ايضا وسيظهر كما في الصورة : 
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مجلد ١‏ /52014/5-2014و15 2 إدراج | | إلغاء 


+ له_يتم العثور_على الصورة 


عتد اختيار 'بدون تعبين', سيتم تحذيد الإصطفاف بواسطة الصنف ((1885© 


١”‏ 100.72008م3ه_وم.”. يستخدم عاذة لضبط (تمركز): الصورة في مركز الصفحة. 


رقع الملفات (الحجم الأقصى: 10 1/18) 
| قعااع عدمه0 | معدمط عا8 ملز 


بدء الرفع 


كما في الصورة اعلاه تم فتح المجلد 7١١4-5‏ وهو فارغ في الجزء السفلي من النافذة تحت (رفع الملفات الحجم الاقصى ١٠١‏ ميقا بايت) نضغط على 
زر (اختيار ملفات) أو (151125 ©212005) ستفتح نافذة أخرى ومنها نذهب لمكان الصور التي سنضيفها في المقال او المقالات والضغط على (رفع) علما 
ان هنا يمكننا إضافة أكثر من صورة ولو لمقالات أخرى. سنضيف ثلاث صور ونبدأ الرفع وستظهر كما في الصورة: 


ف تم اكتماد الرفع: ووم.3عءلذاى12105201415-20141 


مجلد | /2014/5-2014دوص1 18 


هنا هك كا 


ومم1علناه ومم.2ع10او ومم.3علناو 


كما في الصورة أعلاه لإدراج صورة ضمن المقال نقوم بعمل كليك على الصورة التي نريد إدراجها ثم نضغط (إدراج) في الأعلى على اليسار وستظهر 
الصورة داخل المقال كما في الصورة: 


1 0 /00967 :ع |ا8 ١/0‏ 
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نص المقال 
> تاموءوق5ت5 ١‏ > وعابرط5 | 5 23 2 ع | عم ن م 8 
ا © كن 2 بل ا ق | > 0 


تقوم رواد التكنولوجيا بتصميم المواقعج الالكنرونية الرسمية بانواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجدمعية 
وفقا لاحدت التصاميم العالمية والانيقة واستضافتها على سرفرات ذات كفائة عالية. 
9 دام نطتوم 


إدراج. رابط مقال دراج صبورة. 48) |.فاصل الصقحات إقن؟ المزيد تبديل المحزن 


نقوم الان بعمل (حفظ وجديد) ونقوم بعمل مقالتين ايضا بنفس الآلية وفي نفس القسم (خدماتنا) والمقالتين التي سنضيفهن (تصميم جرافكس - شبكات 
وصيانة حاسوب) وسيكون شكل المقالتين بعد الاضافة كما في الصورة: 


© © © 9 كال كد هاه :5 


مدير المقالات: المقالات 


المقالات المجموعات المقالات المتميزة 
ا( تم حند مدل يتيح 
الظتر؛ البحت | | إعادة التعيين اختيار مستوى الوصوا ” اختيار المؤلف _ ” | .| - اختيار اللغة - _ ” 
الاسم ذا الحالة مميز المجموحة تاريخ الإنشاء ١‏ عدد الزيارات اللغة ارقم التعريف 
اليحلياكا» لبيك عا 01م 5ن »ع 
0 © 00000001 2011-01-1 2 الجميع 1 
5ع 0ومممه-]مأ 301084 نك ٍ 
انان هاا علاأاعيم )5ن )عمنا5 
عانان هاا علالاه © كعانهما! أمعاممع عناطنم 2011-01-1 5 الحميع 
عانالم ع بتطعمع) مول 
عاناكها! دع موعأهت عاعنايق 
و © عا ههاء! أمعاممع عاطانم 566لا ععمنا5 2011-01-1 الجميع 
عاناك0 دعم موعاهع_واءتارع) : 
عانان هاا مرموع]3© د5عاعتايم ]52لا مناه 
0 © ععاناههاء! أمعاممع انام مول 2011-01-1 10 الجميع 4 


عاناك6-مموعامعوعاءنارع) 


ستضيع المقالات التي أنشأناها بين المقالات التجريبية التي تكون ضمن جوملا ولكي نظهر المقالات في القسم الذي نريده كما نلاحظ أعلاه نختار القسم 
أو المجموع كما في الصورة أعلاه وبعد اختيار المجموعة ستظهر المقالات كما في الصورة: 


200000000 0 00967 :|| 1/08 
لامي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


3 3 4ه 
مدير المقالات: المقالات ةَُ ا يو ا وو 
جديد | تطيل تكن 2 إلغاء النثر ١‏ هميز الأرشيف | القحص ١‏ حدف | الخيارات | الفساعدة 
المقالات المجموحات المقالات المتميز 
الفقتر: اعادة التعيين اختيار الحالة - ” | | خنماتا 0 اختيار أعلى حد لوصول ” | | - اختيار مستوى الوصول ؟* | | -اختيار الموؤتف * اختيار اللغة 0 
الاسم الحالة ممين المجموحة الترتيب مسترى فرصسيق أنشئ بواسطة تاريخ الإنشاء ‏ عد الزيارات اللعقة رقم التعريف 
تصميم جرافكمر 
_ خدماتنا 1 عاطانام ]56لا )ع منا5 2014-05-8 0 الجميع 
03-17-08-05-4 9 َ 0 9 
تصميم مواقع إلكتر 
يم موا 0 © خدماتنا ان ]56لا عمنا5 2014-05-8 0 الجميع 7 
1 ع ) 
شبكات وصياتة حاسوب 
وضوكة دي © خدماتنا 0 عاطنام ,56لا )عمنا5 2014-05-8 0 الجميع 


26-04-17-08-05-4) 
إضافة مقالات للأقسام التي أنشأناها سابقا 


سابقا أنشأنا أقسام وهي (تصميم المواقع - تصميم الجرافكس - شبكات وصيانة - عام ). وأنشأناها كي نقوم بعمل مقالات لكل قسم سنقوم بعمل مقالتين 
في كل قسم ثم عمل ” مقالات في قسم عام وهي (من نحن - اتصل بنا ) وسنحتاجها في بناء الموقع لاحقا لأن عدم وجود بيانات ولو حتى افتراضية 
(تجريبية) لن تستطيع العمل على الموقع بشكل سليم وتجرب كيف يتم عرض البيانات وما الى ذلك. 


القوالب (دع]12صددء7) 
تعتبر القوالب من اهم الاضافات للنظام جوملا كونها تمثل واجهة الموقع والقوالب موجودة بكثرة وتدعم جوملا ويمكن الحصول عليها من المواقع 
الداعمة لجوملا. ويمكن البحث عنها (وع)2[ددع1 12ددده0[). 


يوجد قوالب جوملا مجانية وقوالب أخرى غير مجانية ومن المواقع الداعمة للقوالب: 


(طدوء.وءه[صحدء)غ هلمم زامط - سصمء.عمسعطاممم - سرمء.ع أ ه[مصث )00 - حم.“ءأكدمد-د[1دورموز ) وهنا مثال لأحد القوالب التي 


سنطبق عليها: 


711000 #0 009677 :6 || 08/ا 
امه أعم.وأم داءعع]©0)مز :اتدمع ‏ 772755202 2:00967 8|118 0لا 


0 


دءاععم5 


ؤممم تاغمملزة 


كاز هلالا أدع]3| )ن0© 


هه 


م2 


لدينا هنا أحد القوالب المدفوعة (غير المجاتية) سَبْتَم ارفاقه مع تطبيقات آلَكتَابَ- سيتم تنزل القالب إلى الجهاز ثم تركيبه أكلى الموقع الخاص بنا جوملا 
وطريقة التركيب كالتالي: 


من لوحة التحكم (مدير الإضافات). 
اختيار ملف. ومن هنا نختار القالب كما نزلناه من الموقع الرسمي للقالب. 
بعد اختيار القالب يتم الضغط على (رفع وتنصيب) وسيتم التركيب وظهور رسالة النجاح في عملية التركيب. 


ولتعيين القالب الذي اخترناه للموقع نذهب من لوحة التحكم نختار (مدير القوالب) وستظهر الصورة التالية: 


سم 2 5 / 4 
مدير القوالب: الأنماط 3 © 8 01 96 
مدا الافتراضي تعديل 2 اتسخةطبق الأصل حذف الخيارات | الساعدة 
الأنماط القوالبي 
الفلتتر: البحت اعادة التعييز اختيار القالب 3 اختيار المكان ٠‏ ” 
لأنماط المك القالب إءة الافتراضي 57 قم التعريت 
ووم -ءنومثم الموقع عملم تت 
هزوم - كتهو الموقع 55 © 
8 ززع ووم - يموق الموقع 0_جمء8 ©© 114 
لأا ئزيوئهم - مهوع الموقع 0 جهء8 001 © 
اا نووم -مرمتوونا8 المدير >[5101ع 8 3 
]نووم - ,طون المدير لكا 


ف 2 13 503066 - الإقتراضى الموقع 3تاعهم5_يعم513 115 


من خلال الصورة أعلاه. نضغط على (61_576041:8م512 - الإفتراضي) للدخول على اعدادات القالب وتعيينه كافتراضي للموقع من خلال الصفحة 


5 


التاليه: 


550000 0 00967 :08/2 
اام أع مهام اعع]هم]ما :اتهومع 2 772755202 2:00967 08118 


/ا 5 


مدير القوالب: تعديل النمط ”ي كا 6 © 42 


احقظ حقظ وإغلاق | حقظ كنسخة ١.‏ إغلاق المساعدة 
التقاصيل 
> عنوو8 
اسم التمط * 3م506 (503 - الإقتراد 9 9 
- 2-6 الإقتر م م1 ووما »ا عووما (0) مم7 
القالب قاعمم5_اعم هناد 
5 1 10900 ادير 
الاقتراضي 0 3 
0 موما 3 7 
رقم التعريف 3 115 9 9 لاد عع ذه اممع: 
وصف القالب كانا) طوذاومع) لال انالا هموما 260 
2 6م513 أماوانا دوم ا 7 
1.6011 6م 00115113[ /الالالالالا لا 21 امررع1 2.5 001115ل. 
م1 أنا0/زقا ونه + امعتممع + قاع 7 
06015136 
أل انالا و8 متذانا م960 
سودي اد مداه يون الالعع امم 00ت ستدعمم. ع عت 1 6 
طثل الال محمسامت غطونع 0 
3185 امدمعا رعمها5 همل اله أه مدعل عنقا م عع5. ١‏ 
دامع .وعم لأكدرممز.هومع لالثمتته طال الال تأع هما 100 
95 5 طال الالا ماع هما 100 
#اااع ل 01 بتاع ابرع 0 ' 
ألمنا طالالالا ل) امعمرعم © (ععزم 


.لإاتعومةء ومتلاآناط عأأدمء/٠‏ 251] عمند 01 10م ه مآ ووالاءبيل أأعد نامل عوتوههما 9 َ 
160 أكناز عللهذ! نامل[ )13 اعع1 نامئز عرم]عط عاك من لمرو نزلآن؟ )أ عع5 أكناز نملا أواة7 005ناامء معام يددا 9 تعم 
نا عا مآ ععمعمع]11ل علا اعع1 ناملا علق 0غ ممع 15 ا مزع دمممع عتاعنا :اا ومتلاتسسط 

ناملا باعم5!13 لوول لاط لعمرواعناعل مععط 125 أعنا00]م 115 .ول أمولدعل عأأدلاع/لا 01 

آ0 اهنا عط ما برأتااماكدععع32 لإكقع 0ق 0؟ ,0أزمنا داومل عطأ هآ لمعلم؟ لعأدنما دعاؤة أمدهرم 3505 

كع؟نتأهع؟ وملكاكها لاكقع 01 007805ناط! طأأباا دع ادمع لعكهط وادوممل ووتلاآناط. مس مده 


)121 الأبلاغ -لمتأكدعنان كلطا 25 عاملرتد 5ه ذأ غ] ,اأعلالا 007 0غ لمعاوزغ] وع00 غهطلالا كما أحاو ررم م زموه © ويم © وونا 
لاع .عرماعط ععناء مهتا ,عأ200؟ غناي عأتدطعننا ومتأهعى أن ععمعلرعمعع ونام 
لاأطوتط عأهععء 0 ناملا 6 5رمهل عاطادكمم ع8 الح معمه مأ كصتة ارمع ممع كما عمو رمم 77 سمهو 17 


0 55 0ل ااآناط الكآيلا عررمء كهط غ! .عدمتا كدعا وأ عأأدوع/لا لعأهع 50 1ذاممو 


ممم مه 32 د جم 534 


من خلال الصورة أعلاه عند خيار (الافتراضي) نختار الجميع. ثم نقوم بالنزول إلى اسفل الصفحة وستظهر الصورة التالية: 


> 5 12 نض 1 7 © خ« ل ه د 810-15 ألع - رام ئزةايقع ابن - بيع ارمق وع]3 امحوعة_حرمء دوم تمه مامعءء م/م غم أكتمتاحملق/32.5اجرمه ز/أدمطاهه| 5] | © جه ©» 


ل باللا الآبلا )] -ل0متأكعنان 5اطلا 25 عاملراد 35 5آ 1 ,ااع نالا 0072 0 لمعام1 ]1 006 غ اانا مكما أحاوأمرزم مح نمع © ويم © وو*ا 
»ااا .عرواعط ععناء مقطا ,510001 اعنام عأأذاعنلا ولتاهع]ء ]0 ععوعلمعمعاع عناملا 
لالطولطا عأهععء 0غ ناملا ما 5ومل عاطأدكعمم 156 الت معمه 0غ كدمتة روشاع ممع 5 ب حجح ح   -‏ _ - جح م 
1010 1م |00 
0 255 متغلاساة طاتبه عصمء كه! | عونا دهما مآ عاتدطعي لعامع اد آ امد 98 تمس قوت مدع عدوي تقد 
؟ع2851؟ إأطهناء(اع طمن )آ ع)121 0غ ناملا 101 لمأكدع ملم املع 5 هلاوهل! | 3 


تعيين القوائم ِ 
ديت تبديل التحديد 000 ا «ذاء نا نهاك © ملم © وو* 
3جمممل اتامطم عاموط موأاه ادنم م1 هموما ءاويم موما القص5 طون 7 
وج - لعاتما5 ووالاء 6 مجاهم زم معمواوعم أعم 5558م هلم بره معموافء م 
9 - 0013مهل ومأونا! لي- وما8 نوم 
و - - 508051005 ومأونا و -غأومم وما8 3 عأللا 
و - -- قمع مدمممم0. ح- معالدة عوقما 4 نامعالة 
وج - -- -أمع مومدممت أمعاوممه. وج - - 5اقتمأمم >4 فاممع 
- - عاعنايق عاومزاة 9- - ممعم 4 0م36ه2800 
|- - - - - 85((مموع0318 عاءتارمش و- قامنا يوم 
- - وما8 لمموع)02 ماع لايق 
إمط5 اأبمع 
--أونا واه واعثايم 7 
- -- - - وواعنايق لمع اناشهعع لها" وو 0 
2 سي مط وس - 3أفعمماعتووع اأنمع 
- - واءلتيق اناك سويت 
روج - --- أمع مدمممه0 عقاوم وي مصوده 
وج--- -- 5هأموعاق2 قامه 6 وه اأوما ‏ . 
- - مموعلقك عاوماة عقاوم له 0 
---- اع تممه اوماق والح 
- - 000138 لع الاهعع وه - 05م63ي 
-أمع مدمحممك كام ناطع للا معان متقالز 


- - - - - كلم أامعلالا ‏ اأحممناة 


5- عصمم 
- - لمو0318 عاوما5 معام أامع للا وصي- مذانا عانة 
03820085 مام امع الا 9- - قعاعنارش 
5 - أمعلومحلمه0 جلععع وراعلا وج - - مامامعلالا 


من خلال الصورة أعلاه نقوم بالضغط على (تبديل التحديد) ليتم التحديد على جميع المربعات الخاصة بالقوائم كما في الصورة : 


ا 0 /00967 :عا |08 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]أ :اأهمرع 2 00967 :2 عااا8 كلا 


.تعيين القوائم 


قائمة الاختيار: 


دمل أنامحام 
قي - 5130180 ومتقاء 0 
- 00713هل ومأونا! 
-- 508051005 ومأ5نا 
- - - 815 00م0001©. 
--- -أمعمومممهت أمعاممن 
ويج - - -- - واعنايه عاوما5 
5 - - - - - 1©5)مو03]8 عاعتايم 
5 - - - - - و0ا8 و0318 عاءتايم 
2< - - - - -51تا /1اهو0318 عاءنايش 
9 - - - - - وعاعلايق لع انتقو 
2 - - - - - وعاعنارم لع /ااعم 
2 - - - - - #اعتاية أأحمطناة 
قي - - - - 814 00م001© أعقامم 0 
2 --- - - 185]وو0318 1م60 
2 - - - - - 0318901 عاوراة عقامم 
2< -- - - - 000130 عاوماة 
8 - - - - - 0001365 لعانااهوع 
وي - - - - أمعمممممم0 ملمذاطع لالا 
2 - - - - - 6الأاطعلالا ‏ الحمطناة 
9 - - - - - /للموع]3 © عاوواة مام ذامع الا 
2 -- - - - 85أهوهأق 0 مام امع الا 
ا - - - - أمعمومجممن دلموع وبرعلمر 


علموم موأاهأدنم 
يي - عممت ماروم 
وي - وما8 وم 
بي -غأدمم وماق د عألثالا 
بي - لمعالةة عو3ما 
تيه - - 00315أمرمش 
ويج - - [810مع56 
وي - امنا ,وم 


ممطك أسمع 
هي - عدممعاعثالا 
قي - 013عمماعرموع آم 
قي - 61010/815 
وي - ونا قامه© 
روي - لأوما 
قي - 005 لاما 
بي - عماءع, 3 للم 
بي - 5عماععم. 


نامعا! متهالا 
وي - ممم 
نت 
(ويه - - 5عامتازش 


طاصتلطدلقة 


006 ا ذاعم تاها 


م1 موما<زاعنم 
/إ0 0519060 


4 نامعالا 


4 قاممع 


ه 


لعع 01م 


هموما الج اذونا "1 


همه 55م مول برط معموافوم 


بعد عمل الخطوة السابقة نقوم بعمل (حفظ وإغلاق) وسنقوم بالضغط على (معاينة الموقع) اعلى لوحة التحكم على اليسار وسيظهر الموقع كما في 


الصورة: 


.هو [/دوناأةء ٠0‏ ذا | © 


تناه غ201 علزه :تع تمق جتنا 11 


من خلال الصورة أعلاه لم يتم فتح الموقع وظهور رسالة خطأ وتعني تحميل ال(ع41313615701:1) الخاص بالقالب والموجود في نفس الموقع الذي نزلنا 
منه القالب وسنقوم بتنزيله. بعد تنزيل ال(25[ز_افاعط_ددمع5956و_ع1م) نذهب من لوحة التحكم إلى (مدير الاضافات) ونقوم برفعه وتركيبه كما قمنا 
بتركيب القالب. ثم نعود للوحة التحكم ومن القائمة (الاضافات) ثم (مدير التطبيقات المساعدة) لتفعيل ال(11:2121501:12) كما في الصورة: 


27> © « ل هه ده 


4 

8 
ٍِ 
ع 
الا 


إضافة مقال جديد مدير المقالات 
مدير الموديولات مدير الإضافات مدير اللغات 


ستظهر الصفحة التالية: 


أع طا.0 آم حاععغ. نا لانالانا 


مام عع لم 1/مغمدتم احم لة/22.5احومه ز/أكوطاقءه| 5 | © ىو 


2-71 >_آخر 5 أعضاء قاموا يتسجيل الدخول 
الاسم المكان ارقم التعريف 


ععولنا معمن5 المدير 19 


> أكثر 5 مقالات قراءة 


© 4 آخر 5 مقالات مضاقه 


أعراءهأم حاعع]©0]طأ :اتهمطع 


الايوجد أعضاء داخل الموقع .أنه 1 عضوداخل الإدارة.. "أ الاتوجد رسائل 9ع معايتة الموقع ([_تسجيل خروج 


"إواصحه 171 


التضاط الأخير تسجيل الخروج 


09:24:00 2014-05-8 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عااا8 ولا 


5586 


الموقع | المستخدمين | القوائم | | المحتويات ١‏ التطبيقات | الإضاقات | | المساعدة 


لله الايوجد أعضاء داخل الموقع الله 1 عضو داخل الإدارة . ") الاتوجد رسائل ا معاينة الموقع 9[ تسجيل خروج 


“9 مدير التطبيقات المساعدة: التطبيقات المساعدة © 9 زه و | <> 


اسد التطبيق المساعد الحالة الترتيب التوع ذ تنصر 0 قم التعريف 
الوصول 
المصادقة - جوملا © لمع اناق لوممز عتامانام 1 
مصادقة - ||1/|3 6 0 ياك 98 0 
توتيق - 2ر08 | © مع طن 
التحقق - 1م6030 6 وطعامقء قلع امهعم عتامانام 


من خلال الصورة أعلاه ستكون الاضافات المساعدة كثيرة ولتوفير الوقت في البحث نكتب عبارة ضمن اسم الاضافة التي نبحث عنها في حقل الفلترة 
كما في الصورة ونكتب ولو جزء من الاسم كما كتبنا (زاءط) ثم نضغط (البحث) وستظهر النتيجة كما في الصورة: 


مدير التطبيقات المساعدة: التطبيقات المساعدة © © © ب نتن 5 


اختيار الحالة - _ ” اخقيار التو 0 اختيار مستوى الوصول - ؟ 
اسم التطبيق المساحد الحالة الترتيب عه عقصر -_- َم التعريف 
ع الوصول 
“01لا 3ع ماعن - لمع أده 0 عناطنم 1000 
عدد أمطر اللائحة: | 20 ”" 


نلاحظ ظهور الاضافة وأمامها إشارة حمراء. نقوم الان بعمل كليك على الاشارة الحمراء وستتحول على اللون الأخضر ويعني هذا تفعيل الإضافة 
الخاصة بالقالب. سنفتح الموقع وسيكون كما في الشكل: 


عم مدا/! 51 منوه | 55 عامم53 لم 516 ععود2 عاممقعط 


دءأععمك 


كما نلاحظ كيف ظهر الموقع وهو شبه فارغ. 


٠ َ‏ يف 9 ا 

أماكن الموديولات (5ده205160 ©8/100111) 

عند تحميل القالب تكون الشركة المصممة للقالب قد عرض في صفحتها مميزات القالب واجزائه ومكوناته ولذلك فلابد عند تنزيل أي قالب معرفة 
ال(وم205110) الخاصة بالقالب ليتم وضع المودويلات المناسبة لها والقالب الذي قمنا بتنزيله يحوي خارطة بهذه الأماكن وهي كما في الصورة: 


ا 0 00967 :عا |8 0لا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]©0]طأ :اأهماع 2 00967 :2 ا اا8 0لا 


0616هم 


لاعموعه 


0566 


أو 


او أو 


لاوا 


أطوم تاو 


لمخام وا 


6مغاوط 


لل كن 


5اعمهم 


0565 


كأمماممء 


1052 


#امعاممهء 


05م6غمط 


4م 3اعمهم 
511065 
للك لعييك 
إفانلك 
ممامعون 
20000100 001002 
مم اناوه 
لمنالنيا لشيلللينا انيلا اعمادة) 
0000 
عنام ##سامعا ‏ 6عسما ‏ كعنادمة 
نكام ماه ننامع؟ 
رجاهم 
4م 0ع لاله ط د12 
وم ركلالان 
4برطاااات 3زاااناب 2رالالغن القن 
ومقامه انان 
8اأمعاممء 6اأمعامم 
عون 
24 2101013 


امهم 


ك5امعامم6 


22 


أوةن 


يننا 


162 لفيننا 


للنيفيننا 


164 لعينا 


مط لم1 


طلم بمعلقممط 


يننا 


كما نلاحظ الأماكن في الصورة أعلاه والمسجلة في الصورة عند تركيب الموديولات يتم وضعها هناك. 


تركيب الموديولات 
الموديولات كما عرفناها مسبقا هي اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع. هناك أنواع كثيرة من 
الموديولات كلا حسب وظيفتها : (موديولات جامدة - موديلات ديناميكية ). 


/ا؟” 


موديولات جامدة : موديولات يتم وضعها في مكان معين في الموقع ولا تستمد بياناتها من قاعدة البيانات وسيتم العمل عليها لاحقا مثل عمل بانر أو 
صورة أو إعلان معين. 


موديولات ديناميكية: موديويلات يتم وضعها على الموقع وتستمد بياناتها من قاعدة البيانات من خلال قسم معين داخل الموقع مثل (موديولات الأخبار 
الرئيسية - موديول آخر الأخبار .. الخ). 


سنقوم الآن بالبحث عن مودويلات مناسبة للموقع الذي نعمل عليه الان وسنبحث عن موديول سلايدشو ليكون في الصفحة الرئيسية. بعد البحث في 
المواقع الداعمة لجوملا سيكون لدينا مودويلات جاهزة مثل : 


(2200_179015511061:1) سلايدشو, 


(2م07_5طو_ولاعم_لودم) لعرض الأخبار. 


أع جا. 0 أم حاعع]. /انانانا نالا 


أعراءهأم حاعع]©0]طأ :اتهمطع 


0 /00967 :ع اا ١/08‏ 
2 00967 :2 عاونا 


ا" 


(9م211ع_ع1مددزو_مه_لوده) عارض صور بسيط, 
(16_3:01456»_25مددذى_م1_5مدم) عرض مقطع من يوتيوب حسب الاختيار. 
بداية نقوم بتركيب الموديل الأول وبنفس طريقة تركيب القالب (مدير الاضافات - اختيار الملف - رفع وتنصيب) . بعد التركيب من لوحة التحكم نذهب 


ل(مدير الموديولات) وستظهر الصورة التالية: 


اصدت مدير المويولات: الموديولات © 6 


القلتر: البحت ‏ | إعادة التعيين الموقع _ * اختيار الحالة - _ 5 اختيار الموضع , اختيار التوع * ١)‏ - اختيار مستوى الوصول - 5 اختيار اللقة - _ ” 
الاسم الحالة الموضع 2 الترتيب التوع الصفحات مستوى الوصول اللعة ارقم التعريف 
1 انان 10 01/151101 نالا 6 الاشيء (تقعيل 0 أعاد 0ه | ,5110 /ا/ا0الا لاشيء (تقعيل فوري) ان الجميع 
عع نارق لع ازطعرم © لاشيء (تقعيل فوري) 1 أرشيف المقالات المحدد فقط لاانام الجميع 


من خلال الصورة أعلاه نلاحظ الموديول (710757511061) وامامه العلامة الحمراء نقوم بالدخول على الموديول بالضغط على اسمه وستظهر الصفحة 


5 
5 
التاليه: 
7 
التقاصيل. 
الاسم * عن 10/! ,ع5110//ا0 نالا 
إظهار العنوان © إظهار 98 
الموضع ع امم مط اموق 3 تحديد الموضع 
الحالة غير متثور | 9 
عذاطنم 9 
1. أعانافهان! 10/010519 ؟* 
0000-00-0 00:00:00 2 
0000-0 00:00:00 0 
/ الجميج فا 
56 
رقم التعريف 537 101 ,5110 زانا0 نالا الموقع 
وصف المونيول الأآبلا لماع بالاو ذادع5110 عوه1م1 //ا10!ك الآبزا عانال70 115 - 1 عانا1100 ,ع5110 /انا0لالا 


51101 01 نالا 


كما نلاحظ الحقل (الاسم) بإمكاننا تعديل الاسم وتسميته بأي اسم اخر (١‏ إظهار العنوان ) في حالة اختيار إظهار سيتم عرض الاسم في الموقع لذا هنا 
سنختار (إخفاء) . الموضع وهو الاهم من خلال الخريطة الخاصة بالموقع تبين لنا ان هنا مكان مناسب للسلايدشو أو هذا الموديول وهو المكان الذي 
يحمل الاسم (511069)» ثم (الحالة) ونختار منسور ثم نترك الخيارات المتبقة وستكون الاعدادات كما في الصورة: 


١/08١1: 00967/ 0 51‏ 
١ :‏ أع جاه أم حاعع]©ه10]أ :اتجموع 2 00967 :2 عااا8 0لا 


التقاصيل 

الاسم * اها مع 01/5110 نايا 

إظهار العنوان © إظهار 0 إخقاء 

الموضع هذاه | | #عاممامطوتوماة 
الحالة منثور ؟ 

مستوى الوصول ءاطع ,_"0 
الترتيب 1. أعانافهال! بع110 18/0105 * 

بداية النتتر 0000-00-0 00:00:00 ١‏ | 

تاريغ اتتهاء النثر 0 | 3 

اللغة الجميع ف 

ملاحظة 

رقم التعريف 57 1/1011 5110 زانا0) نالا 
وصف الموديول 


51101 ناملالا 


وننتقل للجزء الثاني من الاعدادات اسفل الصفحة كما في الصورة: 


100 
تعيين الموديول على الصقحات لمحددة فقط ,_" 
قائمة الاختيار: تبديل التحديد الغاء التحديد | | تحديد الكل 


0113 أنامنايم 5ق5 لؤأاةأذنامش م550 انمع 


- مهنم 

- مذا! 511 
- - قعاءتاض 
- - 165ل أامع الا 

00011365 - - 

- مأوما 

- 51185 6ام5311 

-- 15,ةم 

- - مولاة 

- 01513101ألالم عازه 
- 95و23 غامدم قاع 


الغاء التحديد | ! تحديد الكل 


9ه 2 2 20 60 20 20 00 0ه 0ه 0 


نامع ا/! متقانا 


* ]| | تحديد الموضع 


الموقع 


]آلا لعاهع]ء الام لاكع5!110 11120 //5!01 الآبنا 1200101 115 - 1 ع1ننل10! ,5110 زانا0 نالا 


م10 نامع اا ,عونا 


من خلال الصورة أعلاه الخيار (تعيين الموديول) نختار (على الصفحات المحددة فقط) ثم نضغط على نارع11 311333 وإختيار (عمده1]) ثم حفظ 


وإغلاق ونذهب لرؤية الموقع وسيظهر كما في الصورة: 


ع جا. 0 أم حاعع]. /الانانا نالا 


أعراءهأم حاعع]©0]أ :اتهمطع 


0 /00967 :ع اا ١/08‏ 
2 /00967 :2 ااا كلا 


الكضا 


دءاعممد 


تم تركيب الموديول الخاص بالصور علما أن الموديول تم عمله ببرنامج (511061 75003777) حيث يقوم البرنامج بعمل سلايدات لجوملا وأيضا كسلايد 
عادي يتم تركيبه كما فعلنا ذلك في تطبيق (5117). ويمكن الحصول على المزيد من الموديولات من هذا النوع على الرابط : 


(/001212.01:5[. كد10 كمع اكت //:دطغط) 


يتم التعامل مع بقية الموديولات بنفس الطريقة بعد تنصيبها على جوملا ومن الموديول السابق نرى أنه جامد أي لا يأخذ الصور والبيانات من قاعدة 
البيانات ولهذا سنقوم بعمل موديل آخر في نفس المكان وإيقاف السابق. ويمكن إيقافه بواسطة (مدير الموديولات) والضغط على الاشارة الخضراء. 


لدينا الموديول (2م2200_51106512077_01:0_5) نقوم بتركيبه على الموقع بنفس تركيب السابق من (مدير الإضافات) وبعد التنصيب من لوحة التحكم 
كليك على (مدير المديولات) وسيظهر كما في الصورة: 


الاسم الحاله الموضع اذ الترتيب النوع السسفات 


2 ممم بززه راوع5110 زف لاشيء (تفعيل فوري) 0 2 ممم بارمزعع5110 لاشيء (تقعيل فر 


كما في الصورة اعلاه نضغط على الموديول (5122 210 511065110887) وسيظهر الموديول كما في الصورة: 


100 0 00967 :|| 1/08 
ماخ أعم.هأمحاءء]©م)مز :تدمع 2 772755202 2:00967 08/18 


مدير الموديولات: الموديول 2م010_5_ث/الا7100_5!1065110 


التفاصيل 

الاسم * 2 ور رازوراوع5110 

إظهار العنوان إظهار © إهم 

الموضع 5ع10ا5 6ع امم مط أجمماع فا تحذيذ الموضع 

الحالة غير منثور | ”" 

مستوى الوصول عذاطنظ ؟ 

التركتيب 1. 582 ورم بوروراوء 5110 ١‏ 

بداية النتتر 0000-00-0 00:00:00 | و 

تاريخ انتهاء النشر 0000-00-0 00:00:00 0 و 

اللغة الجميع 5 

ملاحظة 

رقم التعريف 838 2 ممم بإزورزوع 510 الموقع 
ا وصف الموديول 2 وو باز راذكع5110 

تعيين الموديول على الصقحات لمحددة فقط 7 

قائمة الاختيار: تيديل التحديد الغاء التحديد | | تحديد الكل 


13 أناومام اروم ولاق أدرائمش م50 انمع نامعانا منقانا م10 نامع اا ,عونا 


تبديل التحديد ‏ الغاء التحديد ١‏ | تحديد الكل 
2 يي - عدممم 


"0/4 


كما في الصورة والجزء الأول من الاعدادات على اليمين (الاسم) وهو اسم الموديول ويمكن تغييره» (إظهار العنوان) اخترنا إخفاء. (الموضع) 51105 
.(الحالة) ونختار منشور وليس غير منشور. نترك بقية الخيارات وننتقل للأسفل تعيين القائمة ثم (تعيين الموديول) ونختار (على الصفحات المحددة 


فقط) ثم (سء71 منه81) ونختار (11023). 


الجزء الثاني من الاعدادات على اليسار: 


111لا 55ه1 عانانهاا 


الا 560 


أطواعلم 270 


50116 0213 < 
1015م /لا0(ادع5110 < 
١1/102100 00015‏ < 


خيارات متقدمة < 


.| 1 أ :أ 


0 /00967 :ع اا ١/08‏ 


2 00967 :2 عاونا 


ا" 


الخيارات الأساسية: هنا نقوم بتعيين الطول والعرض : بحيث العرض (7130612) ونحدد 15٠0‏ ثم الطول (1161514) حددنا ١1".ننتقل‏ للجزء الآخر من 


الاعدادات ع50101:0 12218 : 


ع16نا50 ألاع01011) 013 * 


2810011 ل 0060015 


خدذمات 
وممعل0 09 امهل * 
؟ع]11؟ وممعل0 قم ؟" 
ناه مث ؟ 
5عاعنالم لع نااوع] إظهار 7 
5ع 0ه 1ه .ملا 3 
601 نط5 2 © تحعم 
مععاصةا 1141 ها ا نعم 
036 /ثا10ا5 ٠.‏ دا قت 
عا11:ة ااولا5 ل © نعم 
1130 لاملا 3 © تعم 
لعكامنا عوهددا © ا نعم 


الخيار الأول نختار مصدر المحتوى (001312(). 216801:7) وتعني القسم أو المجموعة ونختار (خدماتنا). عة:0206 وهنا نختار آلية الترتيب مثلا 
حسب التاريخء العنوان » الانشاء. (1116©7 010631138©) ومعنا نوع الترتيب إما تصاعدي أو تنازلي. (411412015) تحديد المؤلفين للمقالة او من 
ادخلوها. (و16ع4101 0ع1ن1"6»36) وتعني المقالات المميزة. (5ع51101 04 .720) تعني عدد الشرائح. بقية الخيارات كما هي مضبوطة أعلاه ويمكن 
قراءتها وترجمتها وستتعرف على وظائفها إلى نهاية الاعدادات. 


الجزء االباقي: 


١/1081: 009677 0 550000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهمع 2 772755202 2:00967 08118/ا 


امغآناط ع0101هع] بالاو لا5 


اع عرملرلوع 8 تفاصيل أكثر 

5 111 أأدمنا ها لإملالا 01 ألما ملا 
فللريا! حائزلا 8 

5 ومتأاممعوعل انمتا * ل]إملالا 0 أأحمذا ملذةا 
اا وممأمرعوع0 11 

3010 أععمعمق ل 872 نعم 

ايلا انقصط س1 451 

لاع القنط س1 314 


15 الا زادع5110 < 
١13110211000015‏ < 


خيارات متقدمة < 


بقية الإعدادات كما هي مبينة أعلاه » يتم الانتقال الجزء من الإعدادات (105)م0 015طوع5110) : 


5 5110511010 ب 


نم30 | أأناة01] ؟ 
عم 1361011 ممق ع130-عع3ام١ا-]ع‏ بام يا 
القتدعغما 2/000 

0ععم5 200 

110 الم 80101 85ع.0م»ع في 


< ١131102110 15 


خيارات متقدمة < 


خغالر 


كما نلاحظ أعلاه إعدادات السلايدشو .(1,2901364) وتعني شكل السلايدشو 9706©(٠‏ 4:111211013) نوع الحركة. (1011461781) وتعني مقدار الوقت بين 


كل شريحة. (0ععم5) سرعة الحركة. (41251102 4:21212102) نوع حركة التنقل بين السلايدات. 


يتم ترك الإعدادات (2510102) 105)وع213931) و (خيارات متقدمة) ويتم الحفظ. وسيكون شكل الموقع كما في الصورة: 


١/1081: 009677 0 550000‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


ونا 


دءأاعممدك 


ك الصبيانة للحاسيات وال 


ملاحظة (ظهور السلايدشو بهذا الشكل لا يعني ظهوره بنفس الشكل ايضا في بقية القوالب وذلك لأن الموديول لديه كلاسات منشأة سابقا للموديول نفسه 
لأن الموديول والقالب تم إنشائهما من نفس الشركة). 
تركيب مدويول (200_2161755_51207_502): مازال موقعنا شبه فارغ ايضا من الأجزاء في الواجهة الرئيسية وبعد اطلاعنا على ( »2100111 


5 هناك مكان مناسب لعرض موديل إخباري له اسلوب معين في عرض البيانات وهو 5172 512017 7161858 وسيتم تركيبه في المكان 


.)1561:2( 


نقوم بتركيب الموديول في جوملا أولا من (مدير الاضافات) ومن ثم نذهب لمدير الموديولات وسيظهر كما في الصورة غير منشور وأمامه الاشارة 


الحمراء : 
6 الاسم الحالة .... الموضع إخ الترتيب النوع الصقحات مستوى الوصول النغة رقم التعريف 
2 5202 برمحة وباعلمر 6 لآشيء (تفعيل قوري) 0 82 برمط5 وبرعلا لاشيء (تقعيل فوري) عانم الجميع 89 
0 5ماعنايم فعناوعيم © الاشيء (تفعيل فوري) 1 أرشيف المقالات المحذذ ققط عامنام الجميع 27 


نقوم بفتح الموديول وسيظهر كما في الصورة بعد تعيين ما يلزم: 


الجزء الأول من الاعدادات قمنا بعمل المكان في الموضع وحددنا (15612) ثم الحالة (منشور). ثم انتقلنا للجزء السفلي (تعيين القائمة) اخترنا (على 
الصفحات المحددة فقط) وايضا قمنا بالتأشير على عنصر القائمة (11016) وكما في الصورة التالية: 


550000 0 00967 :|| 1/08 
اام أعم.وامحاعء1©هم]م1 :اأهمع 2 772755202 2:00967 08118/ا 


التقاصيل 

الاسم * 22 بازوحات عرانعلم 0 | 

إظهار العتوان © إظهار © إخقاء 

الموضيع عون | ع ادوم مط ممع 3 ا تحزيل الموضيع 
الحالة متثون 3 ا 

مستوى الوصولن ايع ,ا 

الترتيب 1. 582 ورمطك دعل( ؟) 

بداية التتر [0000-00-0 00:00:00 | و 

تاريخ انتهاء التتر 0000-00-0 00:00:00 ا 

اللغة [سع 1 ؟] 

ملاحظة 

رقم التعريف 59 2 بلا0 5 5بتعا! الموقع 
وصف الموديول 2 300 2.5 101 1نال10/! ,5110 الادامكانا دبناعا! وعم ت 5 مول 
تعيين القاتمة 

تعيين الموديول | على الصفحات لمحددة فقط ؟,] 

قائمة الاختيار: تبديل التحديد الغاء التحديد | | تحديد الكل 


013 أناومام روط لؤااةأذدامش م550 انمع نامعارا منقانا م710 نامعارا ,عونا 


تبديل التحديد | | الغاء التحديد. | تحديد الكل 


(9- حليياءلها 


الجزء الثاني من التعديلات: 


١0‏ عناوادنا كن نا 

ععنا50 امعغاومين 0013 , 

لام وع31 6 - 

وملمعل0 031 لعأوع 0‏ ؟*” 

»1111 ومضعلن0 09ععهم ‏ * 

نام حلناكا زراك" في 

5عاء301 لع داوع إظيار ؟ 
أنا3[/0 | عاعناة < 


أنام/اة | 015لا < 


ا 0 /00967 :عا |08 اا 
أع جا. 0 أم جاعع]. /انانانا نالا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 1 اا8 ١/0‏ 


حل 


كما نلاحظ الجزء من الاعدادات (ع50111 12248) الحقل الأول ((11 ©12100]) وتعني في حالة كان الموديل لديه (10) له خصائص معينة من حيث 
الشكل الاستايل فإننا نقوم بكتابة اسمه ولأن القالب والموديول من الشركة المصنعة فإن الموديول يأخذ الاستايل الموجود في ال(11) المعين من القالب 
ضمن ملفات ال085©. 


من خلال الاعدادات السابقة اخترنا الأقسام التي ستظهر في الموديول أو المقالات الموجودة ضمن هذه الأقسام. 


إعدادات النانهج2رآ على : 


١/1081: 009677 0 20000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


لفلا 


ص مدير الموديولات: الموديول 0/_52ا0١5_51للا©1000_1‏ بي مع شخ © © <+ 


احفظ ١‏ حقظ وإغلاق | حقفظ وجديد | حفظ كخة | إغلاق ١‏ الساعدة 


او تم حت المردبول ينيج 
التقاصيل. 
عع]ناه5 0318 < 
الاسم * 
إظهار العتوان أناملات | عاعتاةق ب 
9 000000 00# تحدية الفوض 
عد - حت 5لناامء عاءع3ميم 3 
الحالة 
مستوى الوصول عام ااال ؟ جومم وعنامم 1 
الترتيب |5621 سمدة دول ؟ | وملللهم ممسامع »138 »م15 
بداية النتتر 0000-00-00 000 ا 2 ا 
م0 علا بسامداة ا 8 تعم 
تاريخ انتهاء النر 3 
- لععلمةا ع1161 ز؛ () تعم 
ملاحظة | 
8 5 5 م 1 0 . 
وق ل 89 2م رونك دنواز ية ومن رع 1161 05ملالا * 5ق 
وصف الموديول 3002 2.5 101 عانانله1! ,ع10ا5 الزهامكا0 5بناعا١‏ ععمدا5 رممل فيعفويقنة سه د 5 
3 غتجمنا #«عامقما 30 ها ول,مالا 0635 
تعيين القاتمة 
تعيين الموديول 00 ف 4 0816 إخقاء ؟ 
قائمة الاختيار: د الغاء الك جين 
9 كينظلء ا#تصنية.. | | قدا كسيد | | كنيد الكل عمطانه ندم هالا 8 نعم 
0018 أناممام الي ا م500 اأبمع نامعانا متقانا م10 نامعاا ,عونا 
لااموعأه الامطة © 2« اتعم 
تبديل التحديد | الغاء التحديد | تحديد الكل 
ري - ممم لموعلق لععامتا لا 1 تعم 
9- مةاا م51 5 
005 /الاوداة 9 3 
و- - قهاءثايم 9 8 58 
وج - - قكاماامعلالا 7 
يك © 5 نعم 
9-- قأعقامه 0 
9- مأوما عوقهما فععامتا © «ه © تعم 
9- 5185 عاملمة58 
9-- ككنةم ممتالومم عوهدما علقاععقض  *‏ | #عاطضوم 5‏ +« 
5-- ممه 
و - 01أة أذ امتحولق عازه مأوعقاا عوهدما نك 
وي- دعودم عاممقع 
طلغلاين الممطصسط1 185 
أطواع! القمطصس1 1270 
6ق أععمقم © 2 © نعم 
لمع الاوداة ع16/ مهد © 2 انعم 
5 الاواة © 2« قتعم 
سالط بالاماة هنا ا اتعم 
وممغادق8 ععانا © *8 تعم 
ع5 عع اار1 © 2« انعم 
ناص عوامه6 © «* اتعم 
متأقمامم اقأومعمه1 ؟* 
دعلناه أه عمعطدسلا 10 
عاية5 ممع اام فكممكة لنت #7 مذ 
00ممأوهم /الامداة © 2*5 تعم 
5 الا 0انة الاواة © 5 18 نعم 
لاقام ماه 7 18 تعم 
ممغاناط نزقام لاهلا © 2*2 اتعم 
مغ ةاناعم ا ععزات ععيوم 
لععمه ممتأقدمامم 200 
اقبصمع مما ممكقمامم 5000 
00 كلقا ممتأمصمامه عقعما , 


أنام/اة | ككاوتا < 


خيارات متقدمة < 


كما نلاحظ الاعدادات اعلاه لبعض الاجزاء توضع كما هي وبعد الحفظ أعلاه سيتم عرض الموديول في الموقع كما في الصورة: 


م 0 /00967 :عا |08 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0]0©1أ :اأهمع 2 /2:00967 ا اا8 0لا 
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06 


تصميم المواقع الرسمية شيكات وصياتة حاسوب 


كما نلاحظ أعلاه تم عمل الموديول في المكان المناسب إلا انه اخذ مساحة من الجانب الايسر بشكل أتوماتيكي أي أن العرض التابع للموضع (015©12) 
يساوي 2060 هنا نريد إضافة موديول آخر وسيكون جامد بدون أي بيانات فقط نص عادي. 


إضافة موديول من نوع ( ,17171711 مخصص): 


قبل اضافة الموديول من صورة (20511025 ع710011116) نختار المكان المناسب للموديول واخترنا المكان (015611) ومن مدير لوحة التحكم نقوم 
باختيار (مدير الموديولات) ثم الزر البرتقالي (جديد) ستظهر نافذة نختار منها (موديول ,117711 مخصص) كما في الصورة التالية: 


حدد نوع الموديول: 
2 اماك وبرولز 2 ورط بيزمراوع5110 
1ع نوالا 10ت اما آخر الأخبار 


آخر المستخدمين 


بعد الضغط على (موديول ,17171711 مخصص) ستظهر الصفحة التالية وبعد القيام بتعبئة البيانات وتحديد بعض الاعدادات : 


١/1081: 009677 0 20000000‏ 
ساحمي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


كت مدير الموديولات: الموديول موديول 1471/11 مخصص 


التفاصيل 

الاسم * ماتقوم به رواد التكنولوجيا 

إظهار العنوان © إظهار © إغفاء 

الموضع عونا ع ادممامطت املع ؟ تحديد الموضيم 
الحالة منثور ؟ 

مستوى الوصول عأاطنع , 

الترتيب 1. هالقوم به رواد التكتولوجيا ”7 

بداية النتتر 0000-00-0 00:00:00 | 0 

تاريخ انتهاء النشر 0000-00-0 00:00:00 | ا 

اللغة الجميع م١‏ 

ملاحظة 

رقم التعريف 50 موديول |111/1] مقصصس الموقع 
وصف الموديول هذا الموديول يتيح نك إنضاء موديول |11[/1] خاص يك ياستخدام محرر تالالانا!5 لالالا. 


> اموووءود 8 ١‏ + وعابرة5 
© 7 8 ابل 


ماتقوم به رواد التكتولوحيا 


موقع الكتروني متخصص فى تكنولوجيا المعلومات ويقدم خدمة تصميم واستضافة المواقع الالكترونية والتسويق الالكترونى مواقع : رسمية - إخبارية 
- تجارية - تعليمية -قواعد بيانات إعلانات ممولة : فيس بوك - جوجل - نشرات الكترونية رسمية 


ور لم « ووم2اة دام تطأوم 


إدراج رابط مقال! 12 | إدراج صورة 1 ١‏ تبديل المحرر 


تعيين القاتمة 
تعيين الموديول على اتات لبس ةا 5 
قائمة الاختيار: تبديل التحديد | | الغاء التحديد | | تحديد الكل 


013 أناممام ل ا 0 م550 نمع نامعا/! منقانا م10 نامع اا ,عونا 


4 


الغاء التحديد | | تحديد الكل 
- عمممم 

- م3اا 511 

- - وغ اعللاش 

- - 65م أامع لاا 

- - 5أ000136 

- لاأوما 

- 51185 1م5357 

-- 35م 

- - مملاة 
ل لت 
- قعو23 18ام2*»300 


8 6 8 5 0 6 (85 ( ل 5 21 


كما نلاحظ تم تسمية الموديول بالاسم أعلاهء الخيار الثاني إظهار العنوان واخترنا (إخفاء) والخيار الخاص بالموضع كتبنا أو إخترنا اسم الموضع وهو 
1 ثم تركنا بقية الخيارات وانتقلنا للنص وكتبنا العبارات أعلاه. 


في تعيين القائمة تم تحديد (على الصفحات المحددة فقط) ثم حددنا فقط (110:26). وسيكون شكل الموقع كما في الصورة: 


م 0 /00967 :عا اا8 اا 
أع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أم حاعع]0]0©1أ :اأهمرع 2 /00967 :2 ا اا8 ١/0‏ 


اسمم 


دعوة2 عأمدمقعاع 


عه مدا 51:6 ا 5 عام0 53 10 5116 


دءأعممد 


تبط شبكاتا ليأ كبتكم التعيليثة زإيكل الحتراقية اتهما جدماب :الظيائة للجامبيات: وَلِسَنِكات 


]دم ناوميم عرمزة5زم| 


ماتقوم به رواد التكنولوحيا 


موقع الكتروتى متخصص في تكتولوجيا المعلومات ويقدم 
خدمة تصميم واستضافة المواقع الالكتروتية والتسويق 
الالكتروتى مواقع : رسمية - إخبارية - تجارية - تعليهية - 
قواعد بيانات إعلانات ممولة : قيس بوك - جوجل - 
تشرات الكتروئية رسمية 


تركيب موديول (11617دع_ع1منسذد_مك_0محم) 
أولا نقوم بعمل مجلد اسمه (1»_1122865م2::زه) أو أي اسم داخل المجلد (122852014) وذلك بالذهاب للوحة التحكم ثم (مدير الوسائط المتعددة) ثم 
نضغط على المجلد (12:552014) ثم نكتب اسم المجلد الجديد (وع1»_17328م2مةه) كما في الصورة: 


الملقفات 


2014 


14 225/1 ا جومم زا وحوحوام مه وان 02925 1_عامدمأه إنشاء مجلد 


١/08 ||2: 00967 0 7000‏ 
ايده أع .هام داءعع]©م)مأ :اتأهمع ‏ 772755202 2:00967 08||8/ا 
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كما نشاهد أعلاه في الحقل ادنى الصورة كتبنا اسم المجلد الجديد ثم نقوم بعمل كليك على (إنشاء مجلد) وسيتم إنشاء المجلد وظهور رسالة نجاح 
الانشاء ؛ بعد ذلك نقوم بفتح المجلد الذي أنشأناه ثم نقوم بالرفع للصور ال كما في الصورة: 


60 


قعوقما_ع امج أذابك 1 70520 الدع وهدم 5/1 .52 احممه زاوحوكورام حدم مانت إتشاء مجلد 
رقع الملقات (الحجم الأقصى: 10 1/18) 


| كفاع عومدضه | 6 5عاة 


بدء الرقع 


من خلال (اختيار ملفات) أو (1"15] عوممط)) نذهب للمجلد الذي فيه 5 صور ونضلل عليها كاملة ثم نضغط على (بدء الرفع) وستظهر الصور في 
المجلد الذي أنشأناه كما في الصورة: 


الملقات 
0 اك كنا هك -- 
6 60 ل ا 90 2ه © 1 © هه 
06.809 ممعم ومم 51101 ومم.511022 الك ومم.طعنن 
559025 أ_ع امد أذابك 1 7520 الدع و هج 5/1 .52 احدمه زا وام مه و2 إنشاء مجلد 


نقوم الان بالعودة إلى لوحة التحكم ثم (مدير الاضافات) نقوم بتنصيب الموديول ثم من لوحة التحكم مرة أخرى ثم (مدير الموديولات) وسيظهر الموديول 
كما في الصورة (اشارة حمراء أمامه) : 


١/1081: 009677 0 52000000‏ 
امي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


الاسم الحاله الموضع ذ الترتيب التوع التستحات مستوى الوصول 


3 عوقما عام 


1001 قمع القت 0398| عاممما5 زف لاشيء (تفعيل فو 


5ع اع نايف لع اأطعره © لاشيء (تفعيل فور 1 أرشيف المقالات المحذد فقطظ 


ى تم كا © © + 


* الخيارات الأساسية 

لانم * صور مختارة 

لممععمأن عوهمما كع وهدمذ_ء امج أذا4 1 520وجم الدع وهدما ؟ 
إظهار العنوان © إظهار ود 

“ام 10) لال اللا القمط توناط1) 60 
الموضع السيتت ع امماوطت نمع د العا 2 “م 10) أاواعك القمط نط1 مد 
د منثور أذ 0ه ععموثم ممعكا انا »ا وها 
مستوى الوصول عآاطناه ؟ 

5 005107 عدم10 عدم5 12-0ودقد :2220 55114 عدم1 :د ععلعمط 
الترتيب صور مختارة ‏ * 2222 -ةصنامعواء قط :عدو : وصخةقهم رعدمة ر 
بداية التشر 0000-00-00 00:00:00 | 0 
تاريخ انتهاء التتر 0000-00-0 00:00:00 ١‏ كت 
اللغة الجميعم 7 
ملاحظة 
رقم التعريف 591 ع1نانل10! ماله عو5جم! عامدرزذ الموقع 

ا 5ل *ظ 53(و0م6ممم إرنالاف! 
رصف الموديوأ 1120 /الا5!10 الآننا 100101 11١15‏ - عانانه1/! لمعالد عوهضما عامنراك ععم 2ه ا5 ممل 

)801 الاك ووتكن بمعااةنو 
4 خيارات متقدمة 

تعيين الموديول على كافة الصفحات 03 


قائمة الاختيار 


3 أناومام ماقم مقااقأذناك 0 انمع نامعا! متقانا م10 ناوعا “عونا 


- عمممم 

- م3اا 511 

- - 85 اعنام 

- - 015اذامعلالا 

- - 601013605 
- مأوما 

- 51185 1م5307 
-- 3165م 

- - مولاة 

- 15153101 لأحملم عازه 
- 63985 18م527307 


الإعدادات في الجزء الأيمن معروفة الزيادة هنا اختيار الموضع (20440111) ثم حددنا (على كافة الصفحات) في الجزء الأيسر وهو الأهم في ( عع11122 
'011161017) هنا سيتم عرض جميع المجلدات الموجدة لدينا ومن خلالها نختار المجلد الخاص بنا (22716_12128©5ذه) والموجود في (152652014) 
كما في الصورة يظهر المسار الخاص به. الحقلين الذي يلي المجلد هما للطول والعرض للصور. بقية الاعدادات نتركها كما هي وسيظهر الموديول في 
اسفل الموقع كما في الصورة: 


0 /00967 :عا اانا 


أ 0.17 1ح حاعع]. /الالانا نالا 2 7 :: تآ ١/08‏ 


أع .هام جاعع]©0]صذ :اتهمطع 


كم" 


إضافة موديول فيديو (25ز_ع90615_ع1مدسذزدى_مد_لمم) 


عبارة عن موديول خاص بعرض مقطع فيديو مستورد من موقع اليوتيوب. بعد رفع وتنصيب الموديول ومن لوحة التحكم (مدير الموديولات) وسيكون 
الموديول بعد تنصيبه كما في الصورة: 


الاسم الحالة الموضع ذا الترتيب التوع الصفحات مستوى الوصول اللغة ارقم التعريف 
#6 طنأناملا عاممز5 م5 زف لاشيء (تفعيل فوري) 0 عطاناشنه/ عامم51 م5 لاشيء (تفعيل فورى) علاطنام الجميع 52 
دع اعنايق مع عيض © لاشيء (تفعيل فوري) 1 أرشيف المقالات المحدد ققط علاطنام الجميع 27 


وقبل فتح الموديول نختار مقطع من اليوتيوب حسب متطلبات الموقع وكمثال لدينا المقطع كما في الصورة: 


> © « لعن جهو مد ار - تجاه إنرصامع.عط ننه ممصي ذ] 


1 © |صالح اليامي . 8 


وداعة الله | صائح اليامي - 2إذالة 


كليب قطر السحايه || صائح ائيامي [303/[|. 52161 
انقزلمق اعاق5 بز 


اتساه ساعه || صائح اليامي 2012 
المعلزلف طع1ة5 بز 


يامرحيا | اداء صالح اليامي و خائد المري | اويريت 
جائزة الشيخ الي 2014 

الوهلالة للع581 زط 

7,813 5 


كليب درس الليائي (]1] | صائح اليامي 521611 - 
:34 - 

اهلاق لاعاهذ / 
كما في الصورة أعلاه لاحظ الرابط الخاص بالمقطع سنقوم بنسخ ما بعد علامة - فقط 


5م02 7-11[110064طء غ2 :/سرمء.ء 61 555335.3:01//: م1 ط) بعد نسخ الموضح باللون الأصفر ننتقل للموديول وكما نلاحظ في مدير 


المديولات اسم الموديول (ع5750116031 ع1مدرزك 52) نقوم بفتح الموديول وسيكون شكل الموديول مع اعداداته كما في الصورة: 


1 0 /00967 :ع |ا8 ١/0‏ 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


سحت مدير الموديولات: الموديول انا أناملا_16م117أ5_م5_ل70200 4 ع م 2 6 :5 


6 تم حقظ الموديول ينجاح 
> الخيارات الأساسية 
الاسم * فيديو 
“اأآنات 1355© عانانهالا 
9 0 مع0آ/ا ع طناأناه/ا ادم م0 هلان للا 
البرضع انسيتنا ع ادم مط املق ؟ تعليد اوضع قل ابا 26 
الحالة متنور ؟ ألاوزعن 170 
مستوى الوصول عأاطيع 75 0ه *ا ماطمومع 2156 
الترتيب 1. فيييى _ * 
بداية النر 0000-00-0 00:00:00 ١‏ ا 
4 خيارات متقدمة 
تاريخ انتهاء التتر 0000-00-0 00:00:00 2 
اللغة الجميع ؟ 
ملاسكة 
رقم التععريف 92 انهلا عام51 م5 الموقع 
وصف الموديول .1م5113 0001ل نط 000113ل ,10 عآنال10 عاسكاناملا 
تعيين القائمة 
تعيين الموديول على كافة الصفحات 0 
امة الاختيا تيد حا تحد الكز 
8 أناممام ةم لؤااة اذام م550 انمع نامع اا متقانا م10 نامع اا )عونا 

- عممونم 

- مذانا 511 

- - وعاعتام 

- - 5المأامع الا 

0001365 - - 

- مأوما 

- 51185 16م5307 

-- 75م 

- - م510 


- 5153101 ناحلم عاأة 
- قعوقه عامتمق»ع 


كما نلاحظ الصورة أعلاه أضفنا بعض الاعدادات (الاسم) تم تعديله كما في الصورة واسميناه فيديو ثم (إظهار العنوان) كما هو عليه ثم حددنا 
الرصو505:6) واخترنا (00460532) ثم انتقلنا إلى (تعيين القائمة) وحددنا (على كافة الصفحات) . في الجزء الثاني على الجهة اليسرى حددنا 
(10 710605 056ؤن570) ووضعنا الكود الذي نسخناه من رابط المقطع ثم الذي يليه حددنا الطول والعرض تمنا بالحفظ. وسيكون شكل الموديول كما 
في الصورة: 


تم تعيين الموديول في المكان الذي حددناه وهو (001660712) . 


510100 0 00967 :|1081 
مطخد أعم.هأمداءء:©م]ما :اأومع 2 772755202 2:00967 18ا8 ما 


تركيب موديول من نوع ,1171711 مخصص 
سنقوم الان بعمل موديول جديد ونضع فيه بعض التفاصيل حول مالكي الموقع وسيكون من نوع ,1711711 مخصص بنفس طريقة عمل الموديول 
السابقة الذي بعنوان (ما تقوم به رواد التكنولوجيا). 


سنقوم بعمل الموديول في المكان (170460123) وسيحوي بعض البيانات والأيقونات الخاصة بالموقع وسيكون كما في الصورة: 


ع 
الا 
ااا 
اللا 
اللا 


+ طممومدم > وعابرة5 


+ © 2# 6ه ابل 


1 
اي 
3 

مه 

هه 


رواد التكتولوجيا شارع حدة 


00946 


تلفوت : 7714490030 
تلفاكس : 00967714490030 

البريد الالكتروتي : 0177ع.8000/[©نا5نالا_مع 
جوال : 714490030 


أو عبرصفحاتنا الاجتماعية 


كا فم 


منطفوم 


الصورة على الموقع: 


عمل روابط أيقونات الصفحات الاجتماعية: 
تظهر أعلاه وكما في الصورة أيقونات خاصة بالمواقع الاجتماعية (فيس بوك - تويتر - يوتيوب) ولكي نقوم بعمل رابط للصورة ومن خلال الرجوع 
للموديول نقوم بعمل كليك على الصورة ولتكن الفيس بوك ثم الضغط على ايقونة الحلقة كما في الصورة: 


0 /00967 :عا اانا 


اعدمامطعه عه ادسة 0276202 00967 :2 غ051 


> امموودم + وعارة5 |5 3 35 ع2 | عه ن م 8 
| 3 


رواد التكنولوجيا شارع حده 

تلفوت : 00967714490030 

تلقاكس : 00967714490030 

البريد الالكتروتي : 1[82100.60/77© ٌياقيالا_60 
جواك : 714490030 


أو عبرصفحاتنا الاجتماعية 


ل وما د م نطاوم 


رواد التكتولوجيا شارع حدة 


تلفون : 00967714490030 ١|‏ عاطنا 6016 07202207 
ل اهنا علدنا 
البريد الإلكتروني : 18100.60/7© ٌيإقيالا_80 موق -- غ56 غه11 -- قد 
جوال : 714490030 للا 
7 عدوا اتنا الاجتماعية اكت -- غ56 غه1ة -- 
ْ 
و 16579 « م نطثومط 


كما في الصورة أعلاه بعد ظهور النافذة التي في الصورة نضع رابط صفحة الفيس بوك في الحقل (,11121 ع1«مؤ.1) وكذلك بقية الأيقونات بنفس الطريقة. 


ا 0 /00967 :عا |08 اا 
ع جا. 0 أم حاعع]. /الانانا نالا 


أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 1 اا8 ٠/0‏ 


50 وو 2 هو 
إنشاء القائمة وربطها بالأكسام 
تعتبر القائمة الخاصة بموقع جوملا من أهم الاجزاء فعن طريقها يتم ربط الأقسام الموجودة ضمن الموقع الالكتروني. عناصر القائمة أنواع حسب 


الصورة: 


اختيار نوع عنصر القائمة: 


التغذيات الإخبارية 


جميع مجموعات التغذيات الإخبارية 


دليل المواقع 
جميع مجموعات دليل المواقع 
مجموعة دليل مواقع واحدة 


إرسال رابط موقع 


الأكثر استخداما هي أنواع العناصر للقائمة في (المقالات) وكما موضح أعلاه بالاسم : 

أرشيف المقالات : تعني أرشيف للأخبار والمقالات لأشهر وسنوات. 

مقال مفرد: وتعني مقال واحد مثلا عنصر القائمة المسمى (اتصل بنا) عن الضغط عليه تظهر صفحة واحدة هنا نسميها مقال مفرد. 

جميع المجموعات: وهنا يظهر جميع أقسا الموقع. 

مجموعة كمدونة: وتظهر فيها أقسام المدونة في جوملا ولا تستخدم بكثرة. 

مجموعة كلائحة: هنا يظهر قسم واحد فقط فمثلا (قسم التصميم) عن الضغط على عنصر في القائمة من هذا النوع تظهر مقالات هذا القسم فقط. 


المقالات المميزة: وتستخدم في القوالب القديمة ونادرا في الجديدة بحيث اذا تم تعيين عنصر في القائمة بمميز فإننا نختار القسم الذي نريد عرض 
مقالاته أو أخباره المميزة. 


إنشاء مقالة: هنا لو أردنا عمل عنصر في القائمة للمستخدم المخول له بكتابة مقالة. 


في مثالنا أو الموقع الذي قمنا بإنشائه لدينا قائمة جاهزة وسنقوم بتعديل وإضافة عناصر جديد للقائمة وسيكون ذلك عن طريق لوحة التحكم ثم ( القوائم 
) ثم نختار (12©1213 7123112) كما في الصورة: 


ا 0 /00967 :ع |ا8 ١/0‏ 
ا ١‏ أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /00967 :2 ااا كلا 


هدير القوائم 4 
1# نامعانا عونا 4 5 مسب 
8 2 5 2 513 هلد 
4 
4 


1# قاوممل أنامطم 


مذير المجموعات مدير الوسائط المتعددة مدير القوائم مدير الستخدمين 
لي ا 


0 


حت جلا ممدة تمع 4 
ده فسا 
999771 


هدير الموديولات مدير الإضافات هدير اللغئات الإعدادات العامة هدير القوالب تعذيل العلف الشخصي 
1 
لديك آخر نمخة هن جوملا لديك آخر اصدار من كل 
الإضافات 


وسيتم فتح عناصر القائمة (2321211 713312) والتي هي القائمة الرئيسية وستظهر عناصرها كما في الصورة: 


القواثم عقاصر القانمة 
افقترة [ 0-222 ]| البحت | | إعادة التحيين لامعالا مأوالة1 222 ” | | - تصي الح الأقصى للستويات - ” | | - اختيار الحالة -_ ” | | - اختيار مستوى الوصول - 
لا الاسم الحالة م الترتيبا ذا مستوى الوصول نوع عنصر القائمة 
2 موس 5 © 1 0 علاطنام المقالات » المقالات المميزة 
0 0 0 0 © 2 2 6 علامانام المقالات »م مقال مقرد 
5 سيوبين؟ 00 © 1 9 علطيام المقالات » جميع المجموعات 
0 ا ا © 2 ) © 6 عاماناظ دليل المواقع » جميع مجموعات دليل المواقع 
0 عي 2010 © 3 ] 6 عناطنم جهات الاتصال » جميع مجموعات الاتصال 
0 00 5 © 3 © 6 عنامناه مدير الستخدمين » نموذّج تجيل الدخول 
8 عو زت ل 2 6 عتاطناط المقالات » مقال مقرد 
ل 0 لنوم) © 1 9 عتاطنام ادم مستعان لعتصر قاثئمة 
0 ا ع © 2 6 عآامانام امم مستعار لعنصر قائمة 
5 305أداماممم عازه © 3 © 6 عتاطنام عتوان إتترتت خارجي 
9 5ه عامدمقيع 6 8 00 55 اهم مستار امتصر قاقدة 


(الاسم الستعار: 5ع وقم-عام802»اع) 


بعد ظهور العناصر كما في الصورة اعلاه نقوم بالضغط على العنصر »11011 وستظهر الاعدادات الخاصة به كما في الصورة : 


١/08١1: 00967 0‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 ا اا8 0لا 


أع جا. 0 أم حاعع]. /الانانا نالا 


لأنكنا 


الموتع ١‏ المستخدمين ١‏ القوائم ١‏ المحتويات ١‏ التطبيقات ١‏ الإضاتات ١‏ المساعدة 6ه الايوجد أعضاء داخل الموقع .كه 1 عضو داخل الإدارة > لاتوجد رسائل 8ع معاينة الموقع ([© تسجيل خروج 


5 : 8 © :4 
: 000 8 - 
+8 مدير القوائم: تعديل عنصر القانمة ي | ف حا 006 
اطخ احقظ ١‏ حقظ وإغلاق ١‏ حفظ وجديد ‏ حفظ كنسخة . إغلاق المساعدة 
التقاصيز 3 2 
0 * خيارات تموذج العرض 
نوع عنصر القائمة * المقالات المميزة تحديد 
اختيار المجموعات - كل المجموعات - هم 
اسم القائمة الرئيسية معدامموعنهه ملا 
تصميم المواقع الإلكترونية 
الاسم المستعار عودمعممط تصميم جرافكس 
اصيلة حدوب وتبكات 
ملاحظات عام 
خنمها 
الرابط مع ادوع عي ابيط أمعاممه_لمممحمه نأمه7 مام عع هما 
الحالة متشوى 9 
مستوى الوصول تللدكنها ,5 إذا تركت الحقل قارحا » سيتم استخدام الإعدادات العمومية. 


كما نلاحظ أعلاه قمنا بالتعديل فقط في اسم القائمة وغيرناها من :1107 إلى ( الرئيسية ) فقط ثم (حفظ وإغلاق). نقوم بمعاينة الموقع وسنرى التغيير 
في عنصر القائمة (الرئيسية) كما في الصورة: 


الرئيسية مداا 51 منوه | 5165 عام530 لم 5116 دعود2 عامدمدعاط 


دءأعمهمكط 


سنقوم الان بالعودة للعناصر في القائمة وسنقوم بفتح العنصر (1327 ©5142) وستكون اعدادات العنصر كما في الصورة: 


الموقع ١‏ المستخدمين ١‏ القوائم | المحتويات ١‏ التطبيقات ١‏ الإضاقات | المساعدة الايوجد أعضاء داخل الموقح #2 1 عضو داخل الإدارة ‏ “2]) لاتوجد رسائل 888 معاينة الموقم ([© تسجيل خروج 


تكو 0 5 0000 [ جم 
.#8 مدير القوانم: تعديل عنصر القائمة “ىه © ف 2 96 
فقك احقظ حقظ وإغلاق ١‏ حفظ وجديد . حفظ كتسخة .. إغلاق المساعدة 
التقاصيل 
3 > الإعدادات المطلوية 
توع عنصر القائمة * متال مقرد تحديد 
اختيار مقال * لت اختيار/تغيير 
اسم القائمة * مداا عازه 
الاسم المستعار ممجمعذاه 
4 إعدادات المقالات 
لحفلا 


كما نلاحظ أعلاه نوع العنصر للقائمة عبارة عن مقال مفرد وسنقوم بتغيير النوع إلى مجموعة كلائحة كي تعرض لنا مقالات في قسم معين وهو قسم 
خدماتنا. لذلك لدينا اربع خطوات هي تغيير النوع ثم تغيير الاسم ثم تغيير الاسم المستعار لاسم آخر (اي اسم مناسب للرابط) ثم اختيار القسم 


تغيير النوع وذلك بالضغط على زر (تحديد) من أمام (نوع عنصر القائمة) وستظهر النافذة التالية: 


71100 0 009677 :6 || 08/ا 
لامي أعم.وأم داءعع]©0)م1[ :اتهجمع ‏ 772755202 2:00967 8|118 0ن 


اختيار نوع عنصر القائمة: 


جهات الاتصال 


إظهار لاتحة من المقالات في مجموعة. | 


كما في الصورة أعلاه بعد ظهور النافذة أعلاه نقوم باختيار (مجموعة كلائحة) وسيتم ارجاعنا على العنصر الذي نريد تعديله كما في الصورة: 


الموقع | المستخدمين القوانم < المحتويات | التطبيقات ١‏ الإضاقات المساحدة ا الايوجد أعضاء داخل الموقم © 1 عضو داخل الإدارة “>) لاتوجد رسائل 8*8 معاينة المرقحج ([© تسجيل خروج 


مه 
امد 
© 
6 
ع 
55 
< 
3 
1 
2 
ظًّ 
17 
1 
ٍِ 
5 
9 


» الإعدادات المطلوية 
نوع عنصر القائمة * أمجموعة كلاحة تحديد 
اختيار المجموعة * 
اسم القائمة * إخدماتنا 
الاسم المستعار أجعو_كنه 
4 خيارات المجموحة 
ملاحظات 
: »> الائحة التصميمات 
الرابط جوع أهمعيك أ/ي8 4601م هه_دمممعمه نأمه 7 مام عع 100 
> إعدادات المقال 
الحالة تور 0 
5 >4 خيارات الدمج 
مستوى الوصول عناطنع ؟ 
4 خيارات توع الرايط 
مكان القائمة * نامعالا متهاة ؟ 
1 4 خيارات عرض الصفحة 
العتصر الم جنر عنصر القالمة ف 
> خيارات الكلمات المقتاحية 


نلاحظ أعلاه قمنا بالتالي : -١‏ تغيير نوع العنصر إلى (مجموعة كلائحة). -١‏ اسم القائمة غيرناه إلى (خدماتنا) "- الاسم المستعار وضعنا اسم مختصر 
بالإنجليزية وهي اختياري ويمكن تركه فارغا. 4- على اليسار اختيار المجموعة واخترنا (خدماتنا). 


بعد الحفظ والإغلاق نقوم بمعاينة الموقع وسيكون شكل القائمة كما في الصورة: 


خدماتنا ملوه ا 55 عأام530 لم عار5 وعود2 عاممموعط 


5ع عنام 
65م أامع الا 


000135 


وبعد الضغط على خدماتنا ستظهر الصفحة كما في الصورة: 


ل 0 /00967 :ع |ا8 ١/0‏ 
م ١‏ أعجا.ه أمحاعع]0©1]أ :اأهمع 2 /00967 :2 عااا8 كلا 


الرئيسية اخدماتد لوه ا 55 عاممم 52 600 5116 5عود2 عاممدعاط 


دءأعمهمكط 


شيكات وصيانة حاسوب كتب بواسطة: /)ع5لا /2م0ا5 0 
تصميم جراقكس كتب بواسطة: ]58لا /8ملا5 0 
تصميم المواقع الإلكترونية كتب بواسطة: ]58لا /)عملا5 1 


نلاحظ كيف ظهرت عناصر أو مقالات القسم (خدماتنا) كما في الصورة أعلاه. نقوم الأن بالعودة الى عناصر القائمة وكما في الصورة التالية سنقوم 
بحذف العناصر الزائدة تحت عنصر القائمة (خدماتنا) : 


الفلترة: البحتث إعادة التعيين بمعانا متهاتز * | | - تحديد الحد الأقصى للمستويات - _ ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - " | | - اختيار اللغة - 5 
1 
الاسم الحالة ١‏ الترتيب ذ مستوى الوصول توع عفصر القائمة 2 اللغة قم التعريق 
دبي 555 © 1 عانم المقالات » المقالات المميزة 5 الجميع 
5 ا 05 © 2 ه ه6 عانم النقالات » مجموعة كلائحة الجميع 294 
7< ميرحو ا © 1 0 عانم المقالات » جميع المجموعات الجميع 2520 
2 اعبرم 9-8 6 2 هه علاطنم دليل المواقع » جميع مجموعات دليل المواقع الجميع 438 
3 يوسي 5-5 © 3 كا علاطنام جهات الاتصال » جميع مجموعات الاتصال الجفيع 439 


كما نلاحظ أعلاه تم التأشير على العناصر المندرجة تحت العنصر (خدماتنا) ثم الاتجاه الى اعلا لوحة التحكم واختيار (حذف) وسيتم حذف العناصر 
ويمكن معاينة الموقع ولن نجدها تحت العنصر(خدماتنا) 


نعود الآن الى عناصر القائمة مرة أخرى وكما في الصورة: 


الفتترة: البحت | | إعادة التعيين نامعانا مأدان * | | - تعديد الحد الأقصى لنستويات - ” | | - اختيار الحالة - ”* ]| | - اختيار مستوى الوصول - “" | | - اختيار اللغة - * 
الاسم الحالة م الترتيب ذا مستوى الوصول توع عتصر القائمة ركه اللقة ارقم التعريف 
الرئيسية 
1 3 عنامناه المقالات » المقالات المميزة الجميع 
(الاسم الستماز: موقم 00002) رت 5 المميز: *« 5 
0 2 © ه6 عتامطنم المقالات » مجموعة كلائحة الجميع 294 
(الاسم المستعار: /66ه-/ناه) 5 5 : - 
0 رت 3 © 6 علاطنم هدين الفستهدمين » تموذج تسجيل افذهو 558 23 
) منوما) 1 حو لو - 9 
5 515 عامرموع م 4 © 6 عاطنم المقالات » مقال مفرد الجميع 238 
) 5ع هعامموة) 
حيار تا 1 9 علاطنم اسم مستعار لعتصر قائمة 5 445 
- (الاسم الستعار: 18/م) 
لت 5 
2 6 عاطنم اسم ستعار اعتصر قاثمة 5 م 
(الاسم الستعار: م80) © ِ 
لت © 5 © 6 علامناه عنوان إنترنت خارجي الجميع 448 
م8 14 55 
5و5 عامممقع © 6 6 عتاطنم اسم ستعار لعتصر قائمة الجميع 


(الاسم استعار: هع ووم عامج قيرع) 


من الصورة أعلاه العنصر (10ع1,0) سنقوم بتغييرها على (حول رواد التكنولوجيا) والتي هي عبارة عن معلومات حول رواد التكنولوجيا وقمنا سابقا 
بعمل مقال اسمه (من نحن) سنربط هذه العنصر بهذه المقالة وبهذا يكون نوع العنصر في القائمة هنا (مقال مفرد). وسنقوم بالخطوات التالية: 


١/1081: 009677 0 530000000‏ 
ساحمي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


فتح العنصر (2زع0.آ). 

تغيير نوع القائمة إلى (مقال مفرد). 

تغيير الاسم الى (حول رواد التكنولوجيا). 

تغيير الاسم المستعار الى اي اسم او تركه فارغا. 
اختيار المقالة من الجهة اليسرى من الاعدادات. 


وسيكون التطبيق كما في الصورة: 


التفاصيل 

انوع عنصر القائمة * إمقال مقرد تحديد 
اسم القائمة * حول رواد التكنولوجيا 

الاسم المستعار أمأم_طععة_أرامطة 

الرابط ع نامو دبك أبيق04ع014مه_ممموعمو نام هج ملام عع 100 
الحالة منثور ؟ 

مستوى الوصول عأاطناع 5 

مكان القائمة * نامعان! متوالا , 

العنصر الأم جترغصرضة 0 ” 

الترتيب مأوما 14 

طريقة فتح النافذة القائمة الأم 0 

الصفحة الاقتراضية يا رح نعم 

اللغة الجميع ؟ 

نمط القالب - استخدم الاقتراضى ؟ 

رقم التعريف 233 


كما في الصورة أعلاه من الجزء الأول من الاعدادات قمنا بتغيير النوع للقائمة وبنفس الطريقة السابقة بعد الضغط على (تحديد) ستظهر نافذة نختار 
منها (مقال مفرد). نقوم بتغيير الاسم الى (حول رواد التكنولوجيا). نقوم ايضا بتغيير الاسم المستعار لأي اختصار او اي اسم. 


في الخطوة التالية من الاعدادات على اليسار وكما في الصورة : 


» الإحدادات المطلوية 


اختيار مقال * اختيار مقال اختيار/تخيير 


كما في الصورة أعلاه نقوم بالضغط على زر(اختيار/تغيير) وستظهر نافذة كما في الصورة: 


أع .| ع]. : 1 


0 /00967 :ع اا ١/08‏ 


٠/08١1 2:00967/ 2 


- اختيار المجموعة - 
معد بموع نهملا : المجموحة اللغة تاريخ الإنشاء .رتم التعريف 


1001215 101575310لم 3 يم اق 260100015 لحب 2011-01-1 
عانان0ا/! ع /اأراعيثر 5عانانل0ا/! أمعاومم6 الجمي 2011-01-1 
عانانلها! كعلمموع231 عاعتثريم عانم 5عانانلها/! أمع مم0 الحم 2011-01-1 
عانالها/! بمموعأون وعاعنايم عانم 5ؤعانالها/ا أمعاومة الاب 2011-01-1 


ملقم نواه ادنم عتامناظ ع5 روم -- 2011-01-1 


مهم ؤمعط 4 م عتاطاء ١ه‏ 214 2011 


كما في الصورة أعلاه نختار القسم أو المجموعة التي تتضمن المقالة التي كتبناها مسبقا (من نحن) وقد وضعناها في قسم (عام) وبعد اختيار قسم عام 
ستظهر المقالات التي فيه كما في الصورة: 


البحت إعادة التعيين 


مستوى الوصول المجموحة اللقة ١‏ تاريخ الإنشاء رقم التعريف 
عقامطنام عام الجميع 2014-05-12 78 
عتامناظ عام الحم 2014-05-2 17 


عدد أمطر اللائحة: | 20 " 


من المقالات التي ظهرت نختار من نحن وسنعود للصفحة الخاصة بالقائمة ونقوم بعملية (حفظ وإغلاق) وستظهر الصفحة كما في الصورة: 


حول رواد التكتولوجيا 5 عام5231 ملم عرد 5م230 عامدم3»ط 


دءأعهمك 


وعند الضغط على زر القائمة (حول رواد التكنولوجيا) ستظهر الصفحة التالية: 


الرئيسية خدماتنا حول رواد التكتولوجيا 5 عأام530 0110م ع5 كعود2 عامموعع 


0 /00967 :ع اا ١/08‏ 
أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 عااا8 ولا 


أع طا.0 آم حاععغ. نا لانالانا 


نعود الان للقائمة الرئيسية وكما في الصورة: 


الفئترة: البحثت إعادة التعيين امعاا منهاتة “" | | - تعديد الحد الأقصى للستويات - 1 - اختيار الحالة  -‏ ” - اختيار ستوى الوصول - “" | | - اختيار اللغة- * 
الاسم الحالة | الن] الترتيب ذ مستوى الوصول توع عتصر القائمة و اللقة ١‏ رقم التعريف 

الرئيسية 52550 © 1 عنامنم المقالات » المقالات المميزة 01 الجميع 

0 00 © 2 © 6 علاطنم المقالات » مجموعة كلائحة الجميع 294 
ا 5 ىو - 58 دنا ا دو افد 

3 لعي 00 © 4 © 6 عقاطنام المقالات » مقال مقرد الجميع 238 
اسرية 555 6 1 3 علاماناه امم مستعار لعتصر قائمة 5 

0 0 6 2 6 عاامانام اسم ستعار لعنصر قائدة ابعر 446 
للم عاز5 © © 6 عتامانام عتوان إنترتت خارجي الجميع 

اي © 6 كا عنامانام اسم ستعار لعتصر قائمة الجميع 455 


(الآسم الستعار: جع وقم-عامررولاعء) 


كما في الصورة أعلاه سنقوم الان بعمل عنصر في القائمة باسم (الأقسام) وسنضع عناصر فرعية لها وهي (قسم تصميم المواقع - قسم الجرافكس ‏ 
قسم الشبكات والصيانة ). كل قسم في القائمة هنا سيكون مرتبط بالقسم أو المجموعة الذي أنشأناها من أجله والتي تشابهه بالاسم. والخطوات الاولى 
كالتالي: 


نقوم بفتح العنصر (5ع516 16م2د52). 


تغيير نوع القائمة إلى (عنوان إنترنت خارجي) وهذا النوع يتيح لنا وضع رابط معين ولكن الغرض لدينا هنا تركه فارغا بدون رابط لأننا نريد أن يكون 
المحتوى ضمن العناصر المندرجة ضمن العنصر(اقسام). 


سنقوم بفتح العنصر (5ع)51 16م52) وسيكون الشكل بعد التعديل كما في الصورة: 


نوع عنصر القائمة * إعنوان إتترنت خارجي تحديد 
اسم القائمة * الأقسام 

الرابط 

ملاحظات 


نقوم بعمل (حفظ واغلاق). ننتقل للعنصر (221129) كما في الصورة. 


و تم حتت عنصر الادمة يتح 
القلتر: البحت اعادة الْتَعم بامعايا مأواي ”" | | - تعديد الحد الأقصى للستويات - اختيار الحالة - اختيار مستوى الوصول - 3 اختيار اللفة. 3 
الاسم الحالة ل الترتيبا ذا .مستوى الوصول توع عتصر القائمة الرئيسة اللعة رقم التعريف 
الرئيسية 5 
1 لمانا المقالات » المقالات المميز الجميع 
9م006 تا 001 
خدماتنا © 6 تاطنم المقالات » فجمو الاثحا الجميع 94 
الاسم اند لمعه-/ناه) 5 
حول رواد التكنولوجيا 
© 6 علطيام المقالات » مق( الجميع 2 
) املع عفالهمة) 5 3 
الأقام © 4 ه 6 علطيام عنوان إنترنت خارجو الجميع 
لعف اتلك فك صخضه 
30م 590 
5 جاه عرو ال قن | جه 
كانوم) 
مم5 ا 
2 إنا اأمانام اسم ستعار لعتصر قائمة الجميع 44 
0 3 5 
يي يلت © © 6 علاانة عنوان إنترنت خارجي الحبيد 3 
وعوقم واممقع © 0 6 مانام اسم ستعار لعنصر قائمة الجميع 4 


ععودمعاممقعع) 


700 0 00967 :2 || 08/ا 
ا أعم.وأم داءعع0©1)مز :انمع 772755202 2:00967 8|118 0لا 


550 
بعد فتح العنصر (و11ه1) نقوم بالتالي: 
تغيير النوع إلى (مجموعة كلائحة). 
تغيير الاسم الى (قسم تصاميم المواقع). 
تغيير الاسم المستعار. 
اختيار المجموعة أو القسم (تصميم المواقع الالكترونية). 


بعد تنفيذ الخطوات السابقة ستكون كما في الصورة: 


التقاصيل. ِِ 
> الإحدادات المطلوية 
نوع عنصر القائمة * |مجموعة كلالحة تحديد 
اختيار المجموعة * تصميم المواقع الإلكترونية _ ” | 
اسم القائمة * كسم تصميم الموا اقع 
الاسم المستعار مواعع قاعم 


وسيكون شكل العنصر في الموقع بعد (حفظ وإغلاق) كما في الصورة: 


الرئيسية خدماتنا حول رواد التكتولوجيا الأام مالم عار5 وعووط عاممموعط 


قم تصميم المواقع 


م50 


دءأعممط 


وبعد الضغط على الزر سيكون شكلها كما في الصورة: 


112601ك لولم عاد كععود2 عاممق»ط 


تصميم مواقع رسمية كتب بواسطة: ]58لا ]6م51 0 


ننتقل للعنصر (م5120) وبنفس الخطوات السابقة نقوم بتغيير اسمه إلى (قسم الجرافكس) وربطه بالمجموعة أو القسم (تصميم جرافكس) وستكون 
لاعدادات كما في الصورة: 


» الإحدادات المطلوية 
نوع عنصر القائمة * مجموعة كلالحة تحديد 
اختيار المجموعة * تصميم جرافكس ,5 
اسم القائمة * كسم الجراقكس 
الاسم المستعار هاطمقرو 
4 خيارات المجموحة 
االتخصات آر! 


بعد (الحفظ والإغلاق) سيكون شكل العنصر في القائمة كما في الصورة: 


١/1081: 009677 0 520000000‏ 
امي أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


لكل 


الرئيسية اخماتنا حول رواد التكتولوجيا الأقام 8000 ع5 وعود2 عاممه»ط 


دءأعمهمكط 


وبعد الضغط عليه سيكون كما في الصورة: 


الأشام لات 5عود2 عاممموءط 


تصاميم ومطيوعات كتب بواسطة: ]58لا )ملا5 0 


نأتي لإضافة قسم جديد وهو (قسم الشبكات والصيانة) ويكون مندرجة تحت عنصر الأقسام ايضا ولكي نقوم بعمل هذا القيم نقوم بالتالي: 
من لوحة التحكم (القائمة - 23121 71232 - إضافة عنصر قائمة جديد). 

اختيار النوع للقائمة (مجموعة كلائحة). 

وضع اسم القسم (قسم الشبكات والصيانة). 

وضع اسم مستعار. 

من الاعدادات نحدد العنصر كفرع من الاقسام عن طريق خيار (العنصر الام) نختار (الأقسام). 


وسيكون شكل الاعدادات كما في الصورة: 


١/1081: 009677 0 750000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


السسسسسسمة 
2 
5 | 


مدير القوائم: عنصر قائمة جديد 


التفاصيل 
توع عنصر القائمة * اجموعة كاالحة 302727277700707 |[تصيد] 
ع قسم التبكات والصيانة . 
الاسم المستعار أمقم_اعم 8 
ملاحظات 
الرايط اه وع هسه اقمع ذومه_دومه- جد امه 7 زم >3 وز 
الحالة | منشور ؟) 
مستوى الوصول | تاطيع 3 
مكان لائمة * ا ؟] 
العنصر الأم | جنر عتصر القالمة ب 
كر سيتاح الترتيب يعد حقظ حتصر القائمة 
طلريقة فتح النافذة »0 
الصقحة الاقتراضية تعم 
اللغة 
تمط القالب اهديا دابيا 53 
رقم التعريف 0 
> الإحدادات المطلوية 
اختيار المجموعة * صيلة دلوب وشكت ,"0 


4 خيارات المجموحة 

4 لانحة التصميمات 

4 إعدادات المقال 

4 خيارات الدمج 

4 خيارات توع الرايط 

4 خيارات عرض الصفحة 
4 خيارات الكلمات المقتاحية 


4 تخصيص موديول لعتصر القاتمة هذا 


وبعد (الحفظ والإغلاق) سيكون شكل الموقع كما في الصورة : 


0غ112كام لولم عغر5 دعود2 عامدمقءع 


سنقوم الان بالعودة الى عناصر القائمة الرئيسية وكما في الصورة: 


0 0 /00967 :عا |08 اا 
0 : أعجا.ه أمحاعع]0©1]طأ :اأهمرع 2 /2:00967 ١/08١1‏ 


القوائم عناصر القائمة 
القلترة: البحت | ١‏ إعادة التعيين نامعاا متهالز * | | - تحديد الحد الأقصى للستويات - _ ” | | - اختيار الحالة - _ ” | | - اختيار مستوى الوصول - " | | - اختياو اللغة- _ * 
8 الاسم الحائة | الترتيب 2 0 توع عنصر القائمة 9 اللغة ...رقم التعريف 
الرئيسية 
7 1 0 ان المقالات » المقالات المميزة الجميع 435 
(الاسم الستعار: عو همع5000) إىِ 0 * 
5 حدمت © 26 6 عتاطانام المقالات » مجموعة كلائحة الجميع 294 
(الامم الستعار: /اماع5-]ناه) 
يم حول رواد التكنولوجد 85 5 
9 3 هه علطتام المقالات » مقال مقرد الجميع 233 
8 (الامم الستعار: وأم-اععغ-أنامطق) 9 5 - 5 
2 الأقام © ] هه علطيام عنوان إتترتت خارجي الجميع 238 
قم تصميم المواقع يت ة كلائحة 
5 عتاطنام الفقالات بعة كلائحة الجميع 445 
(الاسم الستعار: ونع 0اع/) و اق 5 
5 قم الجراقكمر 
9 ات © 5 © 6 عناطنام المقالات » مجموعة كلائحة الجميع 446 
(الاسم الستعار: كع1دام978) 
قم التبكات والصيانة 
- شرت رت 3 6 علاطنيم المقالات » مجموعة كلائحة البدين وم 
(الاسم المستعال: 01804-)0) 
5 306 أذاماممم عازه © 227 © 6 عتامنام عنوان إتترتت خارجي الجميع 448 
وعوقم وامممقع © 6 6 عتاطنم اسم مستعار لعتصر قائمة الجميع 455 


(الآسم الستعار: هع و8م-عام801)اع) 


كما نلاحظ في الصورة أعلاه سنقوم الان بعمل عنصر جديد وسيكون (أخبار رواد التكنولوجيا) وقبل البدء بعمل العنصر نقوم بالذهاب لمدير المجموعات 
وعمل مجموعة جديد (قسم) خاص بالأخبار نسميها ونقوم بحفظها ونعود لعناصر القائمة وننشئ العنصر بنفس الالية السابقة وسيكون من النوع 
(مجموعة كلائحة) وستكون الاعدادات كما في الصورة: 


» الإعدادات المطلوية 
نوع عنصر القائمة * |مجموعة كلائحة اتحديد 
7 اختيار المجموعة * أخبار رواد التكنولوجيا 7 
اسم القائمة * أخبار رواد التكنولوجيا 
الاسم المستعار عم 
2 > خيارات المجموحة 
لاحظات 
4 الائحة التصميمات 
الرابط لم0 وع هم عتمع ا/ن6أم016هه_مموحوه أأمه7 وم عرع 0م 
الحالة 4 إعدادات المقال 
/ منثور ؟ 


وسيكون شكل العنصر في الموقع كما في الصورة: 


أخيار رواد التكتولوجيا دعود2 عاممموعاط 


دءأعمهمك 


نعود لعناصر القائمة لإنشاء آخر عنصر وهو اتصل بنا بدلا عن (5©ع738 16م22ة1) وتغيير النوع إلى (مقال مفرد) ونختار من مجموعة او قسم 
(عام) المقالة التي انشأناها وهي (اتصل بنا). وستكون الاعدادات كما في الصورة: 


التفاصيل - 
*» الإحدادات المطلوية 
نوع عنصر القائمة * مقال مقرد اتحديد 
اختيار مقال * أتصل بنا اختيا ر/تغيير 
اسم القائمة * اتصل يتا 
الاسم المستعار همومه 
4 إعدادات المقالات 
دعقت 
4 خيارات توع الرايط 
الرابط ءاه نامو عمموك أ/ي18مع04مه_دمممعمو نام هج مام عع م1 
00 4 خيارات عرض الصقحة 
الحالة منشور 7 خيارات عرض 


١/08١1: 00967 0‏ 
أع .0 أم حاعع]©10أ :انمع 2 00967 :2 عااا8 0لا 


أع طا.0 آم جحاععغ. انا لانالانا 


وسيكون شكل القائمة النهائي في الموقع كما في الصورة: 


الرئيسية خدماتتا حول رواد التكتولوجيا الام أخبار رواد التكنولوجيا اتصمل ينا 


دءأعمهمكط 


وعند الضغط على (اتصل بنا) تظهر المقالة التالية: 


دءأاعمهمدك 


اتصل بنا 


تاريخ النتر كتب يواسطة: 0586| 510081 2 المجموعة: عام 29 الزيارات: 0 ث 


رواد التكلولوجيا 
بق رع يع رام -0ر] 0 


رواد التكنولوجيا شارع حده 
تتقرن : 00967772755202 
تتقاكس : 00967772755202 
البريد الإلكتروتي : 5©([/3/00.601نا5لالا_1© 
جوال + واتساب : 00967772755202 


أو عبرصتحاتنا الاجتماعية 


١/0811: 009677 0 1110‏ 
اام أعم.وامحاعء1©م]م1 :اأهومع 2 772755202 2:00967 08118 


يمكننا اضافة وتعديل ما نريد على القالب الخاص بنظامنا الذي يعمل على جوملا وذلك عن طريق إعدادات القالب أو ملفات ال55) ولكي نقوم بعملية 
تغيير الشعار نقوم أولا بإيجاد الشعار والمقاس الذي نريده. 


خطوات تركيب شعار للموقع : 
تصميم شعل بأي مقاس وسيكون المقاس الخاص بموقعنا الطول(4 )١١‏ بكسل العرض ٠٠0(‏ ؛) بكسل. وسيكون نوع الصورة (67210) خلفية شفافة. 


نقوم بتسمية الصورة إلى (1080.5028) ونقوم بنقلها إلى المجلدات الموجودة في المسار التالي: من داخل المجلد الخاص بالموقع نختار 
المجلد(وءع]19[درمء)) ثم المجلد (1412ع589761_526) وهو اسم القالب ثم المجلد (وع6ع1022) ثم المجلد (567165) ثم ننسخ الشعار الى داخل المجلدات 
(1»1و - 9162و - 9163 .. إلى 59168). بعد نسخ الصورة (الشعار) نقوم بمعاينة الموقع وتحديثه واذا لم تظهر الصورة نستمر في التحديث أو 
عمل (اعادة تحميل لصفحة الموقع - 1020). وسيكون شكل الموقع مع الشعار كما في الصورة: 


هلل الرواد لتكنولوج 


0ر2 


5اعع لاناط لاه 


من الخدمات الراقية والجميلة التي تقدمها تصاميم لجميع وسائل الدعلية والإعلان,قريق 


تم تركيب الشعار ويبقى تعديل العرض الخاص به وذلك من (لوحة التحكم) ثم (مدير القوالب) ثم اسم اقالب (12»142116 - 1_576©1412©م582) كما في 


5 
الصورة: 
نتم 5 5 
مدير القوالب: الأنماط ٠:8‏ © 5 1 || بلاق 6 
للا الاقتراضي تعديل تسخة طبق الأصل احّف الخيارات الساعدة 
الأنماط | القوالب 
القت البحت | | إعادة التعيين اختيار القالب * ]| | - اختيو المكان- * 
الأنماط المكان القالب ذا الاقتراضي معين ارقم التعريف 
#[ال نموم -عنجومم الموقع عملم © 3 
17اآ نووم - كتموع الموقع 825 © 6 
17#اأمازع يروم - متموع الموقع 0 م8 © 114 
7#اآ نووم - 2تموع الموقع 20 مم8 © 4 
8 17اا نووم ممم تمونيع المدير 0116 أدعنا8 081 2 
7[ نهعم -,مطوب المدير طون 5 
5 2 الموقع 3عهمة_وم 53 5 115 


51 0 00967 :عا |8 0لا 
١ :‏ أع جا.ه أم حاعع]© هأ :اتهموع 2 067 :2 ا اا8 0لا 


بعد الضغط على اسم القالب سيتم فتح صفحة الاعدادات الخاصة به كما في الصورة: 


أ بره يوم 
عإذاع اك ل عأقلمنا 8 ماءا! 2 لمعمو هيم العموونوعة بسمعلرعم عاممع 8# سمعيرل] 


3 2526 وخا أعلركت م5 هموما © عوقما © 1 
مع .1عم 0015/18[ الاللا/اا لإ عمأهامدمع1 2.5 0018ل سد امعحيا 
٠0960 0‏ ماع ع7 
0636ل ا 
5105 300 5ع31امممع؟ قادممهل انلع ,لهم 800 ستمعمط. 0 و 
.اعم .[0051١8‏ اللا /اا//نمقاط أطواءعن هموما 2512 


من الصورة اعلاه ومن اليسار قمنا بتغيير العرض ٠٠(‏ ؛) بكسل فقط. نقوم بمعاينة الموقع وسنرى الشعار في كما في الصورة: 


ألم الرواد لتكنولوجيا المعلومات 


9 دمعع ارمام /ا06 اولزناعع7 


تصميم المواقع الإلكترونية 


تقوم رواد التكنولوجيا يتصميم المواقع الالكتروتية الرسمية يأنواعها سواء كانت تجارية 


١/1081: 009677 0 510000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


التعديل فى ملفات القالب (ملفات ال055) 
يمكننا التعديل على ملفات ال255) الخاصة بالموقع ولأن القوالب الخاصة بجوملا في أغلبنا تكون مليئة بملفات ال55) وايضا لان الأكود تكون بالألاف 
فلابد من وسيلة للوصول للكود الذي نريد القيام بتعديله. 


وإضافة لخبرتنا ومعرفتنا بلغة ال095) سنحتاج بعض الادوات والبرامج التى ستساعدنا فى عملية التعديل وهي كالتالى: 
ع مج في هي 

برنامج الدريم ويفر. 

متصفح موزيلا فايرفوكس أو جوجل كروم. 


أداة (عناطع18). ويتم تزيلها من الرابط. 


تعديل حجم عناوين القائمة 


سنقوم هنا بالتعديل على ملفات ال95) الخاصة بالقالب الخاص بالموقع الالكتروني وسنقوم بفتح المتصفح (موزيلا فايرفوكس) والمركب عليه اداة 
ال(عسطء11) والموقع الخاص بنا. 


نلاحظ في الصورة التالية أيقونة الأداة على اليمين والتي على صورة (حشرة): 


80 - | جه © تام عاومدة + 88 | | © > + /ق2ةادهه لاوطا ها © >» 


وللبدء بالعمل عليها نقوم بالضغط على الاداة في متصفح (فايرفوكس) وستظهر نافذة من أسفل الموقع كما في الصورة: 


لك - تم هم 4 م عاومدة + 89 | | © ؟ /2.5_ةامرهه ادم طاكها © | >» 


هلل الرواد لتكنولوجيا المعلومات 


01001 011 


20 /001 ان لالانع 1 


شكت وعينة عسوب 


أحدت التقتيا كر بة وتقدم خدمات الصيان و 
ات ويكل احترافية و أت ة للحاسيات والشيكات 


هه [ م] ععفامم 6 عا! 0010 +منت5ك وى | + اللكها عمدت || | <ج 4 إن م 
01 غنادرها. فعسمسم | + عارؤد ووم ود | 


ع (106 عمذا) ددع.عأقاوممقة تمسدمعدء 1ع < "فطل 1هههلع ةمصوطع -1لساطيعد/ 1/512 لسطاطعد/1 روحده ‏ 3< «««// :واغط" "اله //1هدهةءطةهصهء1 10 :1511348 819/ /ع83//-" ©51081:1 تسعغاط 28ا52011!> 
| | 1 <"3"-10عننو خصنا-ءك 511 "المعطد/1999 وده 3 ممة/ / : وعغط" قم همد "مه-دة">وصة1 : معد "قودعة"عوضة1 تسغطه 9 
تطعمط :دوماع جقوعط> 8 
ن" " تعموعدمء <"عدمعدم1ء وط"-دده1ه تزةدط> إلا 
1ط :2ق 1م 3ق حلسغطر» 
0 -5126-عهمع 
02 :عطوذاعظ 
2 -«عطون1عط-عم115 
35 :نز 1515111 


7100 0 009677 :6 || 08/ا 
امه أعم.وأم داءعع]©0)مز :اتهمع ‏ 772755202 2:00967 8|118 0لا 


** نضغط عليها ونؤشر على عناوين القائمة كما في 


ومن خلال الزر الموجود على رأس النافذة من اليسار والذي هو على شكل مؤشر فأرة 
الصورة: 


هلل الرواد لتكنولوجيا المعلومات 


ا 


2 2101 /1 0 ا و لالايط 1 


/2.5_قاحممهل/اومطاوءها 


96 | م ععفامم 4علة 001/1 عمد كت | > ار | عاصمف | | ك | < > ليك جنع 
. امغط > وطزمط > عاأوع,تمممط#نال > مقعتت-مكقل > نامعم-مكانا > ممع -نامعمم ا > تصعةأ-بمعمق | 1ع | 01 
(26 عهنا) كدءسامعم تفسعوطة ||* <"1617261-0 تامعط- ره "1855 1ن 5 
| 1661-0 1ن <"21252 32176 611 1-نتادعم" 1895 11> 3 
35 9 


همع 1-تتدعد. 11 |[ أ85 <"نتصعد”-225 1ه صوده > 3 
و <صوده /> اترئيسية <" 21216 -تادعجد"-13935ه صقره > 
-تاتط عط ع 
حصووه / > 
,ع منتقط هرمع 1 5 5 
طتوة 2 
<11/> 


16761-1 131 
2 <"صوع تسبسصعد” -5 مم1 11> 12 


من خلا الصورة أعلاه قمنا بالتأشير على عنوان القائمة (الرئيسية) بعد التأشير نقوم بعمل كليك. ومن النافذة الخاصة بالأداة على اليمين يظهر الكلاس 
او ال 0 الخاص بالعناوين للقائمة مع اسم ملف ال99') كما في الصورة. وعند التأشير على (55©.تاتاعصم) الموجود على يمين النافذة يظهر الامتداد 
الخاص بالملف (مكان الملف بالضبط) كما في الصورة: 


© 1 ظ م 


اصغط > وطزلمط > عاأروعاء. قود 


(33 عمنا) كمع معد تتقصع م طة 
 16:81-0 -‏ 111 
55 ,نا ئاع مل /ردق /رق عع مرك_اع م ص حاك /ر5عغ 3 ام حمعغ //2.5_واحمعه ل/يغده طاوعه | مط 
هه 
<> 


,17 212211-35 _ ت 
1طناه # 
16::21-1 2 111 

>< 


من خلال الصورة أعلاه تعرفنا على المكان الذي بإمكاننا التعديل من خلاله وهو في ملف 7361211.055 الموجود في المسار (مجلد الموقع 26127012665 
- 72اععم5_ناء مقط - وى ) نذهب لمكان الملف حسب المكان المشار له وسنجد الملف كما في الصورة: 


100 0 009677 :6 || 08/ا 
لاه أعم.وأم داءعع]©0)م1[ :اتهجمع ‏ 772755202 2:00967 8|118 0ن 


© 1 .- مدق ععلاه؟ بعلم من8 > ١م‏ 

512 عم مص عق 5 عدمولا 
لامعا لبط م 715/60/17 عام ال 

ععلاه؟ عام لبط م15/6/17١7‏ ععانؤد لل 

68 ...5 عال5 ودتلوءعدهه م17/١/15١7‏ وى “> 
48 ...5 عارة5 ومتومععده ‏ لبزء م6/17٠/15١7‏ ونه 2" 
118 ...5 عاب58 ومتلوءكوه6 ١‏ م6/17٠/15١7‏ برامه_(ع1 © 
118 ...5 عاد ومتلوعدهه 1 م ١1/٠6/17‏ اقرع > 
2168 غمن5 منزم ‏ قب. م 715/٠0/17‏ كى.تكئة1 7" 
118 ...ع20 -1أ/ا1 1لا «مععمم ١3‏ م6/17٠/15١7‏ كن ل 
8 14 ...5 عاب5 ودتلوععهه م 7١15/٠/7‏ قامصمهز ؛** 
58 ...5 عار5 ومتوهعء ددع لئع١‏ م 715/٠0/17‏ ممعم "| 
48 ...5 عالو5 ودتلةءكة) 3 م 71/١/17‏ كعانلكمم :©" 
48 ...5 عابود ودتلوعدهه 5 م ١1/٠6/17‏ معادرو > 
768 ...5 عابن5 ومتلدععده 2 ١17:1ام 7١15/00/15‏ عغةاممع؟ ** 
66 ...5 عابو5 ومالوعدهه 18 م 7١15/٠6/7‏ لفرعذواممع؟ >" 
88 ...5 عاب5 ودتلوعدوه م 715/١6/17‏ لإامهوممية :>" 


لدينا الكود التالي والذي سنضيفه لتحسين مظهر عناصر القائمة من حيث الحجم والخط على بعض الاسطر وتعديل ما يلزم وعدم تكرار خاصية معينة: 
1115 ,11125" ,' 1022212 11289 مع دطد1"' : ولتمصد]حامه] 

5010:]ام 1011-1 

ام 15 :1021-5122 


كما في الصورة أعلاه نقوم بفتح الملف على دريم ويفر وننتقل للسطر 75 والاسطر التي بجانبها وكلها خاصة بالقائمة حسب المشار لنا من الاداة 
سيكون الملف كما في الصورة: 


,212213-3. 13 < 16721-0. 111 فطع مط 
2:07 :2031133 قل : 16215 : 21031 :01 21: 161211404352133 2022211-31. 11 < 12761-1 . 111 671 1طناك # 


ان ظر ل 


,5614:0762 2062214-31. 3 < 6634 2061211-3. 13 < 16761-0. 111 تفصع مط 

20-22 20850104 505 (529. 3189665/2022337_35156ة / . . ) 1121: ناه 22 وطل 453 5213:2072 212211-1. 3 < 5224 202211-1. 11 < 12761-1. 111 1271 طتاك# 
:621 ,1317265 ,"مم8 ه11 137165" : غ1 تتةع -2025 

2025-6102 

(:*ط15 :2025-5126 

(2:42000ه20112204-01 4310 62.3517 1-3ا2022. 113 < 12721-1. 1ن 5721 1 طنات # 


لها 


0 


© ماه 


ذم دم دم يم يم دم نم دن نن شن 


3 


,206213-315611. 3 < 6634 202214-3. 113 < 16761-0. 131 7تقطعدمطة 

214-3414 206. 3 < 6304 3062214-3. 113 < 16761-1. 31 16571طنا#5 

: 623 ,1317625 ,"820201323 ه11 1311865" : 11 1خمقتة 2025-2 

12025-16102255 

م15 : 22004329 : 0 : 21520122 : 20216 : 3012 0223 2625-0416 : .2022181 : 11226-22301235 :ع1 05 21: 135213137 : 2 4 : 01ج :عام5 1 : 2025-5126 


بن كير ل 66 


0 


,52 2062211-31. 3< 662 26213-3. 13 < 165761-0. 111 97ق7طمط# 

14 4-31ا1206122. 3 < 4ل 20612211-3. 11 < 165761-1. 11 16571طنا#5 

: 5621 ,117265 ,"2قده8 ه11 1317165" : 117 قتقتةع -2025 

2025-1610 

2025-5126 : 5: 

(1521 : 52003129 : 0 : 202032 : 2026 : 0123302 5625-06 :2025121 : 925 1126-2631 :عل 2105: 01552131 : 222 # : 2م1م» 


نا ثن) ث) ذب) ف) فب ث) كلم 


© ما د 


وسيكون شكل القائمة بعد تعديل كود ال055) كما في الصورة: 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. نا لانالانا 


أعجا.ه أمحاعع]0©1]أ :اأهمع 2 00967 :2 ا اا8 0لا 


الرئيسية خدماتنا ‏ حول رواد التكنولوجيا ١‏ الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


هد ألا الرواد لتكنولوجيا المعلومات 


وذمه ومعع يرورم 0617 للربرعع7 


تصمم شيكات ينحدت التقتيات ويكل احترافية وتقنم خدمات الصيانة للحاسيات والشيكات 


وبهذا اصبح لدينا موقع كامل من نظام جوملا. وسيكون شكله النهائي كما في الصورة: 


١/1081: 009677 0 0000‏ 
اام أعم.وامحاعء1©هم]م1 :اأهومع 2 772755202 2:00967 08118 


الرواد لتكنولوجيا المعلوما” 


في الجزء التالي لدينا بعض الاضافات الهامة للموقع والتي سنقوم بتركيبها. 


111 0 00967 :6 11 08/ا 
ل أعم.هأمداءعء]6©1)م 1 :اأهمع 2 772755202 2:00967 18ا08/ا 


لضا 


إضافقات التواصل والمواقع الاجتماعية 

نحتاج في المواقع وسيلة توصل مباشرة من خلال الموقع البريد الالكتروني مباشرة. هناك ميزة في جوملا لعمل فورم جاهز للتوصل وهناك موديول 
جاهزة يتم تركيبة على نظام الموقع جوملا وتعيين بريد الكتروني خاص في هذا الموديول ويتم ارسال الرسالة الشخص المتصفح الى هذا البريد 
الالكتروني. 


تركيب موديول (011112202121_[25_مك_0محم) 


سنقوم بتركيب الموديول الخاص بالتواصل على الموقع وسيكون في صفحة اتصل بنا على يسارها ومن لوحة التحكم (مدير الاضافات) ثم رفع وتنصيب 
الموديول على الموقع بنفس الطريقة التي تعلمناها وبعد التركيب من لوحة التحكم (مدير الموديولات) وسيظهر كما في الصورة: 


القترظ البحث إعادة التعيين الموقة || ١‏ - اختبار الحالة - | - اختبار الموضع - > | - اختبار النوع - > - اختيار ستو الوصول - > | - اختبار اللفة -_ | 

2 ا العكة ‏ ارشع الترتيب التوع الصقحات مستوى الوصول اللقة ارقم التعريقف 
1 انان ها )01/5110 الا 6" أعاناكها! 510 //ا0لالا عاماناه الجميع 91 

اا 0200122 انان 52 60 يل فوري) 0 أعقاومع عاعان0 م5 عنام الجميع 94 


التفاصيل 

الاسم إرسل رسالة 

إطهلى العتوان © إظهار إهنا 

الموضع وام تحديد الموضع 

الحالة منثور ,5 

مستوى الوصول عأاطنع , 

الترتيب 1. أرسل رسال ”؟ 

بداية النتتر 0000-00-0 00:00:00 0 

تاريخ انتهاء التتر 0000-00-0 00:00:00 ١‏ 0 

اللغة الجميع ' 

ملاحظة 

رقم التعريف 94 0011 كاعآن0 م5 الموقع 
وصف الموديول 12ل ]10 ع1نانل10! أعهاوهن) عاءآن© 0250 )ندزّظ - أعهاوهن عاءآن0 م5! 


من خلال الصورة أعلاه قمنا بعمل الاسم المناسب للموديول ثم حددنا إظهار للعنوان ثم تحديد الموضع إلى (1311:6) ثم الحالة (منشور). 


الصورة التالية من الاعدادات: 


تعيين الموديول على الصفحات لمحددة فقط 0 
قائمة الاختيار: تبديل التحدي الغاء التحدي تحديد الكل 
20018 أناممام لوم ووأ أورام م550 انمع نامع اما متقانا م10 نامع اا )عونا 
تبديل التحدي الغاء التحدي تحديد الكل 
الرئيسية 
خدماتنا 


7171000 0 00967 :6 |1081 
لامي أعم.وأم داءعع]©0)م1 :اتهمع ‏ 772755202 2:00967 8|118 0لا 


ألم 
قمنا بتحديد (على الصفحات المحددة فقط) ثم من ج71 0ؤج71) اخترنا العنصر اتصل بنا. 


بقية الاعدادات: 


> الخيارات الأساسية 


اقمع متحملم مه مهدر أبكالز_مع 
5 56011131 1101166 تم ارسال الرسالة بنجاح..شكرا لتوصلك 
0ط القتملمعت5 ععناملم اشفاك مشكلة..لم يتم الارسال الرجاء اعادة المحاولة. 


4 خيارات متقدمة 


من الاعدادات على الجهة اليسرى للموديول. 10232311 21 4, وتعني البريد الالكتروني لمدير الموقع والذي ستصل اليه رسائل الزوار او المرسلين. 
الحقل التالي لتعيين رسالة نجاح الارسال وهي كتابة جملة تبلغ المرسل بإتمام عملية الارسال بنجاح. الرسالة التي تليها رسالة بفشل عملية الارسال 
عند حدوث خطأ ما. (ملاحظة: الموديول يعمل فقط على سرفر حقيقي). 


سيكون شكل المودويل في صفحة اتصل بنا كما في الصورة: 


الرئيسية ‏ كدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


د للك الرواد لتكنولوجيا المعلومات 


و2 دمعع ررورم ملاعم املربرعع 


اتصل بنا 3 
تصل ب : ار سل و( سالة 
تاريخ التشر كتب بواسطة: )©5/| 510061 ع المجموعة: عام 29] الزيارات: 12 ت مه 
حساك 
رواد التكنولوجيا اتقمع.. 
بخ رع يع راما -0 را 72 اشسرليات 
5398 ذه الما 


رواد التكنولوجيا شارع حده 
تلقرن : 00967772755202 
تتقاكس : 00967772755202 
البريد الإلكتروتي : 07©0[/3/700.6017ا5لالا_ 0 ععهمدد5ع اا ملاعه 
جوال + واتساب - 00967772755202 


أو عبرصتحاتنا الاجتماعية 


لاحظ تم تركيب الموديول بنجاح وتبقى فقط تعريب الموديول وسنتعلم في بعد كيفية تعريب المودويلات. 


ا 0 /00967 :عا اا8 اا 
أع طا.0 آم حاععغ. انا لانالانا ٍ يك 
أعراءهأم حاعع]©0]طأ :اتهمطع 


٠/08١1 2:00967/ 2 


ربط الموقع بصفحات التواصل 


تركيب موديول ع[7000ع©1200_527_12: 


لاسا 


يعتبر من الموديولات المميزة في والتي نقوم باستخدامها في ربط المواقع الالكترونية بصفحة التوصل الاجتماعي الفيس بوك ومن خلال الموديول نضع 


رابط الصفحة الخاصة بنا وبعض الاعدادات التي نريد كيفية ظهورها. 


نقوم برفع وتنصيب الموديول على الموقع الخاص بنا وذلك من لوحة التحكم ثم مدير الاضافات وبعد ذلك رفع وتنصيب للملف. بعد التنصيب نذهب لمدير 


الموديولات وسنلاحظه كما في الصورة: 


الاسم الحالة الترتيب التوع مستوى الوصول اللغة ١‏ رقم التعريف 
1 اناك 1/10 ,01/1/5110 لال [" 0 ع اداه اا عع 1ك /ا/ا0 الا يي( عقاطنام الجميع 91 
16م وطهعوع م56 6 0 امهعم وع م5 عانم الجميع 95 
5ع اعليم مع /ألاعم © 1 أرشيف المقالات عةانام الجميع 


كما نلاحظ أعلاه الموديول (1262001 52) نقوم بفتحه وستكون الاعدادات الخاصة به كما في الصورة: 


الاسم * كن على تواصل 

إظهار العنوان © إظهار - 
الموضع 201 تحديد الموضع 
الحالة هنثور ف 


عذاطناع ؟ 


1. كن على تواصط 7 


0000-00-0 00:00:00 
0000-00-0 00:00:00 | و 
اللغة الجميع ؟ 
رقم التعريف 95 عاممطوعقع م5 الموقع 
وصف الموديول 01ع.1عم5112 0111ل اط انمه[ 10 عآنانل110 عاممطعءع 2؟ عم0 مآ الذ - »إممطععجع م5 
تعيين الموديول على كافة الصقحات ؟ 
قائمة الاختيار: يد الغا بيد بد الك 


كما في الصورة أعلاه للإعدادات التي على يمين الموديول قمنا بعمل ه خطوات (تعيين الاسم - تعيين إظهار - تعيين الموضع واخترنا 5014601211 - 


تعيين الحالة منشور - تعيين القائمة واخترنا : على كافة الصفحات). 


١/08 :ع اا‎ 00967/ 0 
٠/08١1 2:00967/ 2 


أعراءهأم حاعع]©0]طأ :اتهمطع 


أع جا. 0 أم حاعع]. /الانانا نالا 


4 الخيارات الأساسية 


> 0005)م0 لععط بوأاناءم 


4 


15 5ألرع20111111) 


4 


15م عا أمعموعآ 


4 


1005م كعزم8 م11 ا 


انا عو3ج2 عامممععوع أ أعاجع»ع ممه لإممطعه 5 

أل الايا 200 

أأواعم 52 

+ وام غطونا * 

5 5110 *ا ولم 65 ي23> 
187 //ضغ10ا5 *ا ولم 23> 
]8308 الزملاة »ها ولم 73> 
]800 /ثز0 ات ها ولم 75> 


4 61085م0 رمنابا8 عغز1غ ا 
4 11005م0 20210085ع7ترمعع2 
4 01085م0 امكابا8 لرع5 


4 خيارات متقدمة 
من الجانب الآخر للإعدادات أعلاه نختار (11025م07 :10 ع111) والاعدادات كالتالي: 
(1111 ععهوط ع01وطء1"32) : نضع رابط الصفحة الخاصة بنا في هذا المكان. 


(#طعنعء]] - 11101) : الطول والعرض. 


(©2اعطء5 :0101 )): نتركه كما هو ويعني اللون بالنسبة للنص والخلفية ولديك إما مضيئ (110ع1,.1) أو الخيار الاخر ومنها مظلم (23:12ه7). 


(122©59 51017) : عرض الصور الشخصية للمعجبين او المتابعين للصفحة. 
(ددوء )5 51017) : عرض المشاركات التي وضعتها الصفحة. 

12620167 512038) : عرض راس الصندوق الخاص بالأعجاب. 

(:8501:01 511038): عرض حواف للصندوق. 


وسيكون شكل الموديول في الموقع بعد الحفظ والاغلاق كما في الصورة: 


اليا سس أع .هام جاعع]©0]طصذ :اتهمطع 


0 /00967 :عا اانا 
2 00967 :2 عاونا 


نا 


وكما نلاحظ ظهور الصفحة الخاصة برواد التكنولوجيا وبدون عرض لصور المتابعين ولدينا في الموديول الكثير من الخصائص ويمكنك تجربتها 


وملاحظة النتيجة. 


تركيب الإضافة المساعدة (ع:رهط4_50012[5ط_عام) 


تعمل هذه الأداة على ربط جميع المقالات الخاصة بالموقع مع صفحات التواصل الاجتماعي مثل : فيس بوك - تويتر - جوجل بلاس وغيرها ويمكننا 
اضافتها أو تركيبها من مدير الإضافات وتصيبها ورفعها على الموقع صورة للأداة في بعض المواقع: 


86 شبعة | |ءىهه؟ [َيل] ‏ #لاغره 0١|‏ 


(1309©) ع0]38ل-اثم أنا5ثالا 35 و0تنأوهمه5 


الطزءت ملعك 


6أمم6عع3] 00 0515م وؤوام (#ا 


كما نلاحظ في الصورة السابقة لاحد المواقع التي تستخدم الاضافة المساعدة التي سنقوم بتركيبها الان. بعد ان نقوم بالرفع والتنصيب من لوحة التحكم 
من القائمة (الإضافات) ثم (مدير التطبيقات المساعدة) وسيتم فتح الصفحة التالية: 


الفلترة: الأيحدت إعادة التعييز 


اسم التطبيق المساعد 
المصادقة - جوملا 
مصائقة - |(1/|3ة 
توتيق - عره0] | 
التحقق - 980301113 
9 


المحتوى - تحميل الموديولات 


5 


© © © © و 


- اختيار الالة - __” | | - اختار القوع - 1 ” | | - اختيار مستوى الوصول - 0 
الترتيب التوع اذ عقصر ري رقم التعريف 
0 مملقعنامع طاناة ا عنامطنام 401 

لماوع امع لاناة دين" عنامناظم 400 

لمنأقع نامع طاياة مقن عانم 402 
0 وطعاموء ممعم علامانام 439 
0 مع مم عم ةلاذاواءمه_أا عانم 10019 
0 أمع مم عانان00قها عناطناظم 406 


وكما نلاحظ أسم الاضافة (ع:1ه51 500121 131 - 2024214) وامامها العلامة الحمراء والتي بحاجة الى تفعيل ولكن بعد عمل الاعدادات اللازمة. نقوم 


بفتحها وستكون الاعدادات كما في الصورة: 


التفاصيل 

الحالة مقكل_ * 

مستوى الوصول تللدكها مه 
الترتيب 0. المحتوى - تحميل الموديولات 5 

نوع التطبيق المساعد 600011 


ع اذلةاعهك5_اط 


رقم التعريف 10019 


5 (510لاعلا ااافناام ععمنر5 اها ن500 81 


عط لقع وأوسا2 .كماع ناه والرممل عناملا مامأ ق روطعلا أوأع50 ,مزه الج 2005 وأودام ععهناذ اوأعه5 81 
35 لتون!2 .عاعتاة آه مغامط عو مهغ بزدامذال كممتامه 2 طاأينا بأمعاممء مأ كمملاهعه! 5نامأرهلاغج لعلاوتاطيسم 3 
ماعن أداعوة اعوع عاطهؤأل/عاطهوع وق ناملا .)أ عدأ دماأكناء مقع نامنز عععذانتا كودتماعد لمعاعهط دعسم 

عالأععمة عه كعاعنامة لهندلأ/ا ألما ,5 0011غ31ء ركرملاعع5 ع [أأععمك ره لمعل عللط عه ملاو عه بإالدنلأناألما - 


600 لفالعع لاع نل اتمعرهوع] للا 


صطم 
غمعغمه * ) مذود اطغ« مدرسة : مص 1ع طم ةود21ت ١‏ ) 
هع_+اقغمعغممعو1م د معدعطه () 


#عدمغغن8 1 مقعهه : تع مط 1 


ملعسعقدوهه // :1 'غصقععه ' اععمطءة مطعع» 


«مغغدط لمقعه5 // 
عمط «متغعمعفععهدمءع3 // 
عمط عمععدمك عاممطععه 


أع جا. 0 أم حاعع]. /الانانالانا 


['عدمغغتط' اععمطءة مطء» 
( “ممعهدمعهء ' ]ععمطءة مطع» 


١ : //‏ 'عسعهدم ' اععمطءة مطع» 


5121 لقاعه5 8١‏ - ارمعاممه 


5نالاع1ء 


0800م ١م‏ 


2 11 


الامع )انان ١ج‏ 


5للاط 8ا06006 ١‏ 


١ غاقالانا51‎ 


١ 0 


010 مععالثلاناة > 


غ«عاعىم مايا8 


تعأعهم امع ممع 


10 وأودام لعاطووع: 


ممه ارعاوره0 واممل 


ممتازومم 2 


130 وه للم 


111 أمعدسعمن عونا 


أعاءهأم حاعع]©0]طأ :اتهمطع 


ا عاعتايخ عاوما5 
عاعللق اماع 8 


ا عاع0ا)ة علاومام 


حيط ) 


0 /00967 :ع |ا8 0لا 
2 00967 :2 عاونا 


نح ادا 


تم تعيين (مفعل) على الاضافة في يمين الاعدادات وتم الانتقال الى (©0111710© (41(574770151) وتم تعيين الخيار (©471101 ©1ع510) في 


101 ستعاام 0ع[طهصظ. تعيين (ء61)رد 82101) في )زوه غداءغمه2) ج1دمروول فقط وترك بقية الاعدادات كما هي. 


نقوم بفتح أي مقالة لدينا في الموقع وسنرى الاضافة في نهاية الصفحة كما في الصورة: 


تصميم مواقع رسمية 


تقوم رواد التكنولوجيا بتصميم المواقع الرسمية لجميع الجهات ويمختلف توجهاتها الصحية والحكومية والسياحية والتجارية وغيرها 


1 2 ل للشزءاملع.د ع | 


(1309©) 388]هل-اق أناؤنالا 35 ومتأومص 016 05100م ذالم إ#ا 


تعريب الموديولات 


يتطلب منا أحيانا تعريب المودويلات أو المكونات الاساسية ليكون الموقع باللغة العربية ولأن جوملا نظام متكامل ومن خلاله يمكننا تعديل أي كود كذلك 
اللغة العربية لها مجلد وملفات خاصة بها وكل موديول او مكون له ملفاته الخاصة به بالنسبة للغة العربية وكمثال على تعريب أحد الموديولات سنقوم 


بتعريب الموديول الخاص بالتواصل (2200_57_0111012014224_325) وذلك بالوصول لملف اللغة الخاصة به والخطوات كالتالي: 


من داخل مجلد الموقع يمكننا الوصول لملف اللغة من خلال فتح المجلد (عع19280128) ثم المجلد (2-0213©) وسيظهر لنا ملفات كثيرة ومنها ملف 


الموديول الذي نريد تعديله وسيكون اسمه (713.82200_57_)]11112011626)-62) كما في الصورة: 


> دق ععل0اه؟ معلا م8 ؟ب_ّ 


52 مم1 5001 ع:03 0 مولا 
118 عا آلالآ كتمع]]_لعنواع:_لمدم.68-مع ل 
118 ع1 آلالآ كلك تتمع]1_لعنقاع_لمدم.68-مع ل 
36 عا آلال1 تاعققع5_ل68,5000 دمع ل 
118 عا آلالا + كلإكطاءنقع20-68.5000_5 ل | 
48 عا آلآ 2مك_مام_بناهطعع ل تاد_لمصم.68 -مع ل 
118 عا للالاً ع قاممعمء أنرو_مد_68.00 دمع 01 
118 عا آلآ عطانغناهز_عامدماك_مك_لمت68.7 دمع ز) 
218 عاط آلالآ 5 غك_20-68.500 | 
118 عا آلالا 355/5 غ20-68.700_5 0 
218 عا كلالآ 7١انل+‏ ص 7١15/٠5/5١‏ 68.5000 دمع ل 
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نقوم بفتحه ببرنامج الدريم ويفر كما في الصورة: 


عدم © بنج رمعم 40 60 هك ١‏ عضي لبدمعععيايه معي عمه: 


"521211 سفت" ماضلا _11111لم 

".10 172211 امش ع6 2ه ‏ ع635 125350-21 :5121211 21211111 
وعدي - 

٠. . ."‏ 11ه نظ" 11 لظ 


" . . . ج68 زطتنا5 7 -5108031:01 

" . . . 11655366"-:5251 5 للا 

5151110 _!155 5265-5620 112553296" 

"...212 ع25ع21 "1211_1111 

" ! 5622 208 211نظ"-115151_لاظاءا كلهم 9 

".26111260 32 2161045 1921192560ط 811">ت156_قلعط 10 
".211ظطظ 732114 3 لمعه م2125 "هاا _ما1أهلاع 11 
"51166655 211تتقطء 5 م1012-1101 55_1101 ظننناة 12 
"5321160 11 2تتفطء 5 ع11031"-2101101_لاظاءا لقم ١‏ عه 


فم نزخ نين ظرم ا 65 ل 65 


كما في الصورة أعلاه نقوم بتغيير ما بين علامتي التنصيص كما في السطر " سنكتب بدلا عن (...71926) التعريب والترجمة الخاصة بها وهي 
(الاسم..) وكذلك البقية بنفس الطريقة وسيكون الشكل بعد التعريب كما في الصورة: 


0-5 6 اسح ف 13 48 58 عَررْقريج] روم عع صر رض زمعير|_ ع2 
"52211 «لانسدت"-:1811اظ_11111ه 
".10 211 ام 2262© ع216325"-121550 _811لاظ_11111له 
".. الإسم "-112015 
"..البيريد الإنكتروتي">-[1521281 
"..الموضوع"-51]0183801 
"..الرصانة"-11555265 
"إرسال الرصانة"-515:112_115855280625 
"الرجاء الإتنتظار"-18:11 _1211آ1 
"!..لم يتم الإرسال"-11511_لاظءا1هط 
"!..جميع الحقول مطلوية"-256 551 
".الرجاء التأكد من صحة البريد الإلكترونتي"-آ8]280 .5121211 
"511662855 211 تفع 5 ع1101"-108 0055_1101 ناة 
"521160 121 تتتفلء 5 ع 012-1101 121011_لاعانا لفط 


كما نلاحظ قمنا بتعريب النصوص التي تهمنا والتي تظهر للمتصفح للموقع وسيكون شكل الموقع في صفحة (اتصل بنا) كما في الصورة: 


الرئيسية خدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا اتصل بنا 


هلل الرواد لتكنولوجيا المعلومات 


عع اناه /1 0 ان الالانط 1 


/ا 20 


اتصل بنا . ارسل رسالة 


تاريخ التشر كتب بواسطة: 0981] )51/08 2 المجموعة: عام #9 ] الزيارات: 14 
الإسم. 
روات التكلولوجيا البريد الإلكتروتي.. 
مئ رع يع ناما -0 را 00 لتم 
الرسالة. 
رواد التكنولوجيا شارع حده 
تثقون : 00967772755202 
تتقاكس : 00967772755202 ص 
البريد الإلكتروتي : 01©([/3/100-017ا5لالا_(اع إرسال الرسالة 


جوال + واتساب : 00967772755202 


أو عبرصتحاتنا الاجتماعية 
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كما نلاحظ تم تعريب الموديول على يمين الموقع كما في الصورة اعلاه وظهور جميع النصوص باللغة العربية. 


إضافة موديول البحث 
يعتبر موديول البحث من أهم الموديولات في الموقع وسهل التركيب فمن لوحة التحكم ثم (مدير الموديولات) نبحث عن الموديول (1ع5687) نقوم بفتح 
الموديول وعمل الاعدادات اللازمة كما في الصورة: 


التقاصد 
اصيل > الخيارات الأساسية 
الانم * البحت 
م البحت عبارة صندوق البحت 
إظهار العنوان © إظهار 00 إخقاء اق عد 2 
ياس عرض حقل الب 
الموضع لقعو تجديد الموضع نص مريع البحت أبحث هنا 
الحالة منشو 37 زر البحت © يع ) نعم 
سترئ الوَصنيل ءأاطيع فد 
موضع زر البحت يمين ‏ 1 
الترتيب 1. البح 
صورة زر البحت © لا العو 
بداية النتتر 0000-00-00 00:00:00 و 
0 ب نص زر البحت البحث 
تاريخ انتهاء النتر 0000-00-00 00:00:00 | ا 
كتف تقنية البحت قتوح 35 © نعم 
اللغة الجميع ؟ 5 
3 عنوان محرك البيحت المفتوح 
8 5200 ضبط رقم تعريف المادة 
5000 9 دك الموقع بط رقم تعريف الماد 
وصف الموديول هذا الموديول يعرض مريع نص البحث. 
4 خيارات متقدمة 
تعيين القائمة 
تعيين الموديول عة 5 


كما في الصورة أعلاه وضعنا اسم الموديول حددنا (إظهار) وحددنا الموضع (1عج56) في تعيين القائمة حددنا (على كافة الصفحات) وفي الاعدادات 
على اليسار كما تلاحظ. وسيكون شكل موديول البحث في الموقع كما في الصورة: 


الرنئيسية خنماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


دلا الرواد لتكنولوجيا المعلومات 5 


ات ال 


0 0017 ان الالانط 1 
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تعديبلات عامة 

بعد أن أتممنا عمل الموقع وقبل إطلاقه سيكون لدينا بعض التعديلات النهائية وهي : 
إضافة محرر جديد للموقع. 

وضع اسم مطور الموقع على الصفحة الرئيسية. 


إضافة المحرر (100160 7619) 


المحرر هو أحد الإضافات الهامة والتي تتحكم بمحتوى الموقع ولدينا هنا أحد المحررات المميزة الذي يقوم بعمل محتوى مخصص حسب رغبة مدير 
الموقع من اضافة نصوص وتعديلها حجما ولونا وغير ذلك اضافة لعمل الروابط والأكواد (.1117311) وغيرها وهذه صورة عامة للمحرر: 


2# - دعارط5 > لامةءوقدم 0 


|للالا 
||ا|ا 
1 
|لأااا 


9 51 21 231 


الها ١‏ امم امهاءك:اء دو > | 5 


0 1 لذ وها - 2 يل > عمد ممع > انمره غممع 


براكنا د هش هه إن فنا 1ع 1١‏ 1 


بر 0 :ولممالا م نطاوم 


تركيب المحرر (101) 


بعد تحميله من موقعه الرسمي ()113335.1001111201266121)11601.160) نقوم بفتح الموقع الخاص بنا وفتح المجلد (م3)) ونسخ الملف الخاص 
بالمحرر إلى داخل المجلد وفك الضغط الى ملف وتسميته بأي اسم كما في الصورة: 


علاه؟ معلا م8 > طاغانها عرقطة > بموعطنا ماع لساعم1آ > ععامهو0 
52 700110 عغ03] عممولا مس3 
5 ص 7١15/٠6/11‏ مف إل ممغاىء0 للا 
٠١ 1,607 68‏ 2مك“ /ه١.‏ /5 7١1‏ ععز_لممء 8 00/05 -1 
1 + ص 7١15/١5/7١‏ »علوم © كععواه أمععع8 كك 


كما نلاحظ أعلاه قمنا بنسخ الملف الخاص بالمحرر وقمنا بفك الضغط إلى مجلد واسميناه 0020 . 


نذهب للوحة التحكم ثم (مدير الاضافات) وكما في 
الصورة: 
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رقع وتنصيب ملق الحزمة الموجودة على الجهار 


ملف الحزمة عااء عومه68 | معدمك عاق ملز رفع وتنصيب 


التتصيب من ميلد دليل موجود ضمن موقعك 


امجد دلبل التصيب ممع م1١5‏ .2ق حممم ل وكورام مم ق واي 


التتصيب من موقع إنترتت خارجي 


رابط حزمة التنصيب مط 


لاحظ في التنصيب لم نقم بعملية التركيب كبقية الاضافات والسبب لأن حجم المكون(المحرر) كبير بالنسبة للموقع على (1022112056) ولو كان على 
سرفر حقيقي لكان بالإمكان التركيب كأي اضافة ولكن هنا نقوم بعملية (التنصيب من مجلد ..) كما في الصورة حددنا مجلد دليل التنصيب وحددنا اسم 
الملف والمسار بعد ذلك نقوم بعملية (التنصيب) والضغط على الزر. وسيتم التركيب للمكون. وعلينا أن ننتبه للمسار وطريقة وضعه وأن يكون صحيحا 
كما في الصورة وغالبا ما تكون ١(‏ ) الأخيرة معكوسة نقوم بحذفها وكتابتها من جديد. 


بعد تركيب المحرر نقوم بتعيينه كمحرر افتراضي وذلك من خلال لوحة التحكم ثم (الاعدادات العامة) وسيتم فتح الصفحة التالية: 


رواد التكتولوجيا | دبع 21006 /زوه امم ع7 


تعم © لا 


رسالة الموقع خلال إيقافه التحديت والصيانة الموقع مغلق مؤقتاً للصياتة والتحديت.<طط /> تفضل 
بانزيارة في وقت لاحق. شكراً 

صورة رسالة الموقع خلال إيقافه تحديد.) |إتنظيف 

المحرر الإقتراضي * ع0 - بمؤامع ب 

ع0 - بماناع 

المحرر - 001/1170 

المحرر - بنون محرر 

| المحرر - 715/11/12 

2 ؟ 


* 010 


بريد الإلكتروني للكاقب _ 7 


إخقاء ©) استعمال رسالة خاصة استعمال لغة الموقع الاقتراضية للرسالة 


إعدادات 580 
الروابط الصديقة لمحركات البحت © تعم 

استخدام روابط 010[ ]لالاع] © تعم © *ا 
يضيف لاحقة (|111017) إلى عناوين الانترنت اتعم 5 
الأسماء المستعارة بالرمز الموحد قعم ٠.‏ 
تضمين اسم الموقع في عناوين الصفحات ؟” 


إعدادات سجل المتصقح - الكوكي- 
اسم نطاق الكوكيز 


مسار الكوكيز 


من خيارات (المحرر الافتراضي) نختار (7617 - ©1701401) كما في الصورة أعلاه ثم حفظ وإغلاق. 


يمكننا إضافة الحقوق للموقع أو للمالك فمن خلال إعدادات القالب يمكننا تعديل الحقوق فمن لوحة التحكم (مدير القوالب) ثم ( - 38ا©©57_دعم512 


114 1؟)2) وستظهر الاعدادات كما في الصورة: 


0 174و 'زم 00 51101 


610 14و ]لم00 جميع انحقوق محفوظة لرواد 
التكنونوجيا 

تت ل 

عم موما<“زاعن هموما القم5 ؛أطونا ؟* 

/إ5 0851060 7عم555م0ل) برط معموزدء0) 
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١‏ 0 . 2211303 ط -21 2 © 1 . #بازباتيا 


كما نلاحظ أعلاه اضفنا الحقوق لمالك الموقع وايضا حددنا (710) لشعار الفريمورك (12ذ1»ط). سيكون شكل الحقوق في الموقع كما في الصورة: 


ملاحظة : يمكننا حذف محتوى الفوتير كاملا ووضع اي بيانات أخرى في حالة كنا نعمل في مجال إنشاء المواقع بالإضافة الى تعديل أي كود ضمن 
القالب ولكن كل ذلك في حالة شراء ترخيص القالب من الشركة المصممة له. 


6 .بم‎ ٠ ٠ هه‎ ٠ 
إضافة عنوان رئيسي للموقع‎ 
بقي لدينا عمل عنوان للموقع باسم المؤسسة المالكة أو المالك للموقع ليظهر في شريط الموقع ولعمل ذلك من لوحة التحكم (القوائم) (نتدء7/1 صنة31)‎ 
ثم نفتح (الرئيسية) وستكون الاعدادات كما في الصورة.‎ 


التقاصيل 
4 خيارات تموذج العرض 
توع عنصر القائمة مقالات تحديد - 
4 إعدادات المقال 
اسم القائمة * 
> خيارات الدمج 
الاسم المستعار 22110 
مومع 4 خيارات توع الرايط 
ملاحظات خيارات عرض الصقحة 
الرابط لع ؟نائهع أعبمك أ/0146018مت_دمم عمو نمه 7 مام عع 100 53 
عون سلعة امكح الرواد لنكنولوجيا المعلومات | 10 
الحالة متشور 3 
إظهار ترويسة الصفحة تعم 


عأاطيع ف 
رويسة الصقحة 
نامعاناا منوانا ث1 
صنف الصقحة 
العتصر جنر عنصر القالمة ؟ 
الترتيب الرليسية , 
طريقة قتح النافذ: القالمة 7 4 خيارات الكلمات المقتاحية 


من الصورة أعلاه على يسار الاعدادات (خيارات عرض الصفحة) وفي حقل عنوان صفحة المتصفح نقوم بكتابة اسم الموقع وسيكون شكل شريط 
الموقع بعد الحفظ والاغلاق كما في الصورة: 


1 لتيية قي * الرواد لتكنولوجيا المطومات | 15 2356 1407 زكتري | 0011700 الرئيسية 135 "[ 
امو ل/غدهطاقعه! 06 


3-4 20عع1 | الرواد لتكنولوجيا المعلومات | د.‎ ١ 


إضافة البيانات الوصفية 
من البيانات المهمة للموقع اضافة بيانات عامة تصف الموقع بشكل عام بالإضافة للكلمات المفتاحية الخاصة بالموقع والمهمة لمحركات البحث ولعمل 
ذلك من خلال لوحة التحكم (الاعدادات العامة) وستكون كما في الصورة: 
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11 م 5 
اسم الموقع إرواد التكنولوجيا | 45ع 21062 /[و0010 712 

الموقع مغلق تعم 9 

رسالة اغلاق الموقع إخقاء © انتعمال رسالة خاصة استعمال لغة الموقع الاقتراضية للرسالة 


رمالة الموقع خلال إيقافه للتحديت والصيانة | ازموقع لق مؤققاً للصيانة والتحديث_<2ط /> تقض( 
0 5 ا جك 
بانزيارة في وقت لاحق. شكرا 


صورة رسالة الموقع خلال إيقافه تحديد..) [تنطيف أهعاينة 
المحرر الإفتراضي * 08ل - ممؤادع 4 
- يدون اختيار - _ ” 
عذاطنيع ؟ 
20 ؟* 
10 * 
البريد الإلكتروني لكاتب ”7 
حدادات البياتات الوصفيه 
البيانات الوصقية للموقع 5 
لو هد رواد التكتونوجيا موقع متخصص في تصعيم وتطوير المواقع 
الالكترونية 
الكلمات المقتاحية للبيانات الو صقية ال 3 إل 5 
لخلمات المقداحية للبيانات الوصقية الخاصة بالموثع |مو اقع , النكترونتية,تصميم,تطوير,استضاقة,رواد,انتكنونوجيا 
الروبوتات(800015) سنو الدع ,عتعهما ؟ 
حقوق المحتوى 
© نعم 
تم ٠.‏ 


كما في الصورة اعلاه لاحظ الحقل (البيانات الوصفية للموقع) تم تعبئة الحقل بسطر او سطرين نبذة عامة حول الموقع. في الحقل الذي يليه (الكلمات 
المفتاحية) وهي كلمات مفصول ب(,) وهي الكلمات التي نريد من محرك البحث أن يبرز الموقع الخاص بنا في حالة تمت كتابة احد هذه الكلمات فيه. 


حذف البيانات التجريبية 


قبل رفع الموقع واطلاقة لابد من تنظيف الموقع من جميع البيانات الافتراضية وخصوصا التي اضفناها اثناء تركيب جوملا سواء المجموعات او 
الموديولات او المقالات وسنقوم بحذف هذه البيانات من خلال (مدير المقالات) (مدير الموديولات). 


8 جر . خة من الموقع للرفع 


إنشاء نسخة من الموقع 


بعد أن انتهينا من إنشاء الموقع بواسطة جوملا وقمنا بتركيب الموديولات والمكونات الاساسية والاضافات واضافة وتعديل ما يلزم نقوم الان بعملية 
الرفع للموقع. سنحتاج في عملية تجهيز الموقع الى اضافة جديدة للموقع وتقوم هذه الاضافة بعملية تجميع ملفات الموقع وقاعدة بيانات الموقع ايضا 
ضمن ملف واحد. 


تركيب إضافة (2ه7»ع©23_212مح) 
نقوم بتركيب الاضافة بنفس طريقة تركيب المحرر (70019) راجع الطريقة. 


بعد التركيب من قائمة لوحة التحكم (التطبيقات) ثم (مداء[132 52عع412) كما في الصورة: 
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الموقع المستخدمين القوائح المحتويات | التطبيدات | الإضافات المساحدة 
2 مناكاعة8 واععامش 


!ها مالع عمل 4 


ا 


60 05 الإعلانات 4 


إعادة التوجيه 


إضافة مقال جذيد هذير المقالات 1 هذير الوسائط المتعددة 
الباحث الذى 
5 
التغذيات الإخباريه 
3 : 4 
5-2 سه الرسائل الخاصة 4 


2 
1 

1 
تنا © 


ل[ ]| 


لديك آخر تسخة من جوملا! 


عع 5 راممة عاط عمل 


هدير القوائم هدير الستخدمين 
فى 

اقلم لس سس 

مدير القوالب تعديل العلف الشخصي 


سيتم فتح الصفحة الخاصة بالترخيص والموافقة على القوانين الخاصة بالإضافة وسيكون علينا الضغط على الزر البرتقالي. بعد الانتهاء من ذلك ستكون 


نعود للوحة التحكم ونعود للتطبيق وسيكون لدينا الصفحة التالية: 


2 منكاء ج58 جاععام 


1 نعالأممص علاناعم ‏ عالزممم مرماعد8 ااناجاع0 ؟ 


51031115 51011111121 
53516 5 


نَ 2 


0 نا0 20117 5ع ااممرم 
سنا ليحايين “نا 


511 ناملا مناكاعقط 0غ الدع 5 منكاءد8 وطععكزم 


2014-05-06) 3.11.0 عه0 مبماعة8 وممعكعلم) 


06 عت لمات أوطياجط ٠/13‏ 1000131 
100 6أدلمنا 1030م 


© 


20110 


55 مناكا 823 4 
011 )2 
51 2014-05-5 توج ع 
ممنام رعوع 0 00 13180 مناكاء8 الخميس, 15 أيار 2014 21:02 
ا اللاسسسسسسسس” سيا 
مناكاع 2ط ع1 101 02623 علبااءعاع 
مأو لمعاعة8 
1 مبماعوط عازه اانا © 55 
0 كوا 13645 03636356 
0600 وممأذبااععاع 
ومأذناء »اع 


09 


الول" مدكاءة8 


من خلال الصورة اعلاه نضغط على (71019 م1اء[©1353) والتي تحمل الأيقونة 


4 
96 
+23 5عاأزممط (اء اناه 
1 3 
و9 بها 5 
لاملا منماعق8 5ومنكاءة8 ع13039/ا 09 الاعالا 79 انالع د51 
0ل ممما 


. وستظهر الصفحة التالية: 
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1 


لض 


2 الالا مدماءد8 ::مناكاء523 جععءام 5 0 


الساعدة ‏ إعموم امتاومه 


09 ا ءالا 5مدماءة8 عو2 مدال ناولا منماعه8 0لا 0001 اعموط امكاممن 


مناكا 2ط نلا 3 512116 


1 تعااأممط علتاءعم ‏ عازممم مبماعد8 انداع0 * © وعالزممط عليه 


0 1210 مناماءة8 السيت, 17 أير 2014 145:06 وملام أمعدع0 501 


عع ألاع نامع اناملا 101 عوقم ومنماءة8 ع13039/! ع مأ ,دعمم3 الأننا دلطا1 


017126 مناماءة8 
عه امعلارمءع نامز ,0 (11 اومغدا_ع ]ا انلقع /ممناهالهاكما عط ما) عنااععة مبماعو6 ع8 10510 300 عوهم ومنماءد8 عو1303/] ع5 طاامط مز هعمم3 الأنانا 5ن1. 
نملا مبماعدمق! 2 ااناواعل عرمامعم 

6 ا فك ٠.‏ 54 5 فو 4 4 5 6 45 

نقوم بالضغط على الزر الأزرق وستظهر الصفحة التالية: 
© © 

الاهلا مدماءد8 ::مناكاء 83 جلاععكام 6 

الساعدة ‏ اعموم اوتاممع 


وما موالا ومنماءة8 عو3ىداا تاملا منماعة8 مهنأ ةناو ةمه اعموط اماممن 
لل 7655392 )ممع 6ه ممتاءامجممء 2 عع5 ناملا 5د5عاونا عوهم 3001166 10 عوثناممط أمم مل عدوواط 


560155 مناكاع ج58 


ذاع00معل0سا,_درمء اكارع نوم جامء/2.5_واجهمو لانببامصوسانع 


0 35 052م85] /علمع5 1351 


من خلال الصورة أعلاه يتم عمل نسخة كاملة للموقع. وعليه يجب علينا أن لا نقوم بعملية تنقل داخل الموقع والانتظار حتى تتم عملية النسخ للموقع 
كاملا وبعد انتهاء العملية سيتم ظهور الصورة التالية: 


وما معألا 5ومنكاء83 عو03دا/ا ناملا منماعة8 130نا 00 اعموس امغومكت 


لاأأناأددعععنا5 ل0عغأعام2زه0 منكاءعج8 


/إأأنةددعععنة لعاءامدرمء عقط 5و5ععم/م منداعقط 158 !5مه31أناأةرومه0. 
39م )300616 0غ 3/1036 الام لقع ناملا 


ف 5مناكاء83 1/3396 09 تعالا 


من خلال الصورة أعلاه نقوم بالضغط على الزر الأزرق (182©125 7131286) وسيتم ظهور الصفحة التي فيها النسخ الاحتياطية كما في الصورة: 
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0 متام أرعوع0 هاو 2 مانا 5025 مأو01 عمنا1 عاقاممم 52 لهاوينه ا 8 عوهمهالا 
- - 
ا !59 | البحث 
4 08 مع!2] مناكاءع8 السبت, 17 أيازر 2014 14:06 2014-05-7 7 22 [01 | ماع88 اليا 1 4 طاا 9م . 51+6-10631105-20146517-146656 
مبماعوط ه00 ,وم 


ظهرت لدينا النسخة الخاصة بالموقع وما علينا سوى القيام بتنزيل النسخة من الزر الذي على يسار النسخة أو الصورة ( كم وسيتم تنزيل 


النسخة على الجهاز. 


نقوم الان بنقل النسخة إلى أي مجلد في الجهاز كما في الصورة: 


© لل .> دق ععلاه؟ معلا صنق > طاغابيا ع قاد > لوموعطنا مصاع نساعمآ > ععامقو0 
ع5 عم لمم عغ03 5 عدولا 3 0 

|8 10,0 عاك خمل ‏ هبه م /اذاره./15١؟‏ هم[ 20140517-140650-:5مطاقعماءع:51 [ | ممغاىء0 1 

م0 امنيده 0 1-1 


نلاحظ في الصورة اعلاه ملف مضغوط بصيغة معينة وتوجب عليها قبل الرفع للموقع فك الضغط عن هذه النسخة وضغطها مرة أخرى ولفك الضغط 
سنقوم بتحميل أداة متخصصة في فك الضغط لهذا النوع من الملفات وهي الأداة (10د ]عا 1وطءع412). وينصح أن تكون النسخة في مجلد 


على سطح المكتب أو عدم وجودها في مجلد مسمى باللغة العربية. 


بعد تحميل الأداة وتركيبها على الجهاز نقوم بتشغيلها وستظهر كما في الصورة: 


| 55 || ها أزت أ 3 لعددالئا عونك وطععام 6 
5 م0 مومعو عط 
هم[ 20140517-140650-:5ه 7ااوعها-عغائأهاحمهه زاممغاوع رامع لا م عا ع ملاع يمر 
!5-20140مطاوعها-ع]ائأة احممه زاممغ اع ناماع لاا معممع للأوعولاات عام مغ ومع 
5ع لااجاءمق 05ل ومع لرمنرودعوم 


5 77056 130012 
(و7اطءلاصة وصاعع وق غناه لابلا أدعغ) نام بورنا يعدمدما 


غام ياه 


عوط 


دكعرومم8 ورمعو 


ل مفهموٌأُآكُجل_أ«و .2ج 


حركام. أنات؟ع 0 /رام تتا /ع 13م دمع /ركلقاع الااردع]13متداع_017ع/5 1512011 0ع/301111115113101 


ع .مناعاءق8قطعععام / كماناهم مكلزمه01 .ا كدامطء 1لا 2008-2011© غطو زمه © 


كما في الصورة أعلاه في الخيار الاول حددنا مكان النسخة. والخيار الثاني يتم تحديده أتوماتيكي وسيتم الفك في نفس مكان الملف المضغوط. ثم الضغط 


على الزر (1220:2©6). 


نذهب للمجلد التي فيه النسخة الخاصة بالموقع وكما في الصورة: 
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ردنا 


ععلاه؟ معلا لييانننا > طاغانها عرقاة * بوموعطنا مزع لساعمآ معم0 > ععاموو01 


ع5 ميا لمع لمم غ03 عدمولا ا 


عام عام اظبعء م لا(/ره٠/ي15ء؟‏ 20140517-0-وهطاه ماعغه يل | ممغاىك0 لا 
8 14,590 عا قمر ”1 هم[ 140650- 056-20140517 «اقعماءع11ه 0ل 00/005 0 
كعءواه أمععع5 را 


كما نلاحظ تم فك النسخة الى المجلد بنفس الاسم للملف المضغوط. نقوم الان بعملية الضغط مرة آخرى وذلك عن طريق فتح المجلد المفكوك وتضليل 
الجميع ثم إرسال الى ( 101011 717760 15560 مددده)). كما في الصورة: 


'علاه؟ معلا مس8 > طاغابباع قاد مم0 و > عتامقو0 


52 مر 750011 ع:03 عدولا ع عل 
وفع وص عم نقريم عع هد مم وتمتصلة يلل ممناىء0 11 
4 طاغا/يا ع مهاه و 
عطاعوء 7 00/105 ط 
...أةطامععش مز كعا؟ لعمممده عماطمممه )0‏ وا نك لل ٌ ىعءوام أمععع8 21 
8:2 فحص الطفات العحددة باستخدام 23 | عدوت الا 
1 1د عوقصا نل عأهمطنا لضا 
"زمم,20140517-140650-خدهطاه داع ناة” 16 ولق © ١‏ ععفناعما تلن جد ييل 
..تاتقص قمة ككع ممم 2 مملغواامغكما 77 عأكدا/ا اله 
ٌ نم | 
اتقدمء لمة ":20140517-140650.5-غدمطادعما-ع ةزو" مغ دعع رم درم 5 عوصومط ل 7 : - 
- كع ورطنا لل دمع ٠/10‏ لكر 
ععلاه؟ (معممك) لعدععممره ‏ 1 ١١‏ مغ لمع5 دوه ها 
(أنءغ ,مط عؤأوعءء) ممغاىء 0‏ 1 6 وألعمم 7 منمموعممهن! هه 
كمع صصيءه 0‏ 2 برمه> كعانومصم لل 
خمع امع يموع لوكق كمأونام 77 عخناممره© قار 
#معنمءعء اثقالا لل ا ععغداممعة نأل (ع) دنه اهما ملك 
واد © عمعاءع0 مص يل (:0) عصمساملا معلا وى 
1 0 علمقمعم مونو سوكمم 7" (ع) عصمداملا معلا وت 
(:6) عنقم الام هنام ‏ فل كع طبع مهرم 55عع8886 ل (©) عمداملا معلا وت 
لا مع م االخاص ب عممططة .7 تا عام :7" «علاالخاص بءمهط10 18 
|8 18 أمعدنءعه0 ع7 2 ١‏ علاءعنا ل 
|5168 غم جمناءه0 ع1 عالامفعم ل اورطع ١‏ ج03 
|1168 مع لاع ه0 ع1 كأمطم ل 1ع ل الاع اعم اللقآر 
|8 2 مع صمباءعه0 هه 1 69 طع لان0ل 


بعدها سيتم ضغط جميع الملفات في ملف مضغوط واحد. 


يه 


رقع الموقع 
بعد ان قمنا بتجهيز نسخة من الموقع وضغطنا الموقع الجاهزة ستكون عملية الرفع مشابهة لعملية الرفع للتطبيق الخاص ب72212 (راجع الرفع). 


تركيب الموقع 
بعد رفع الموقع الالكتروني للسرفر او المجلد العام للموقع الجديد نقوم بفك الضغط للملفات كاملة وثم نقوم بعمل قاعدة بيانات جديدة للموقع لكي يكون 
التركيب وتفريغ البيانات المضغوطة في هذه القاعدة. وقد تعلمنا مسبقا طريقة انشاء قاعدة بيانات جديد (راجع الفصل السابق). 


بعد عمل قاعدة البيانات نذهب للمتصفح والدخول على الدومين او الرابط الخاص بالموقع وستظهر صفحة التركيب كما في الصورة: 
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اعلا + | 30 )011601 1١1]59‏ عي رداك لي 


ا ل | ا ا ل لا | لءأمدم مم2 007 مأ لعدمممناك م380 ناملا أدمننا دعن ملز 


مع5واماع < صناءة5 عأأ5 < [[ «منأد,مادعم عكدطماد 0‏ < مملغدالةتكماءعمم 


5 56601111111100 كاعع1!ء 5]211341017ما-عرم 
003ل لانن بزأزالط ةدمجم اانا عمناذمع مأ ععلمه مز عنم ,ن؟ لع0مع7707معع ع3 ذوملتاع5 عدوع1 أععمرمء مأ كمملاء3 12166 ع5دعام معطا (وا! 25 0ع2/1) لعأ)وممناذ أمم 5 كممعة| دعم أه لمج ا 
610 عا لاعأهلم عأآنان غم 0ل 5وملئاعد عناملا | عتدرعمه اللأد الأنلا !إداممل ,بعناعنرونا لإلأعع7/مء وماممناعصناة أمم مم10أدالدأكما !دالزممل عناملا هأ 0دع! 0انامء هد هل مأ عبااتدع لمعم 
001100110 3 
9 1لا 56010 
ع 1ن ل »انا نم5 ع1 4 -< ووزورع/ا ميرم 
إتسسهسم 
١/100 ]05[ | 07|‏ 520 وع7 ]01ممناك ممأودعم71ر20 216 
[011 | 5 /ةامؤام 0ممنا5 االاللا 
2 5 امنا عاامر غ)وممنا5 0343625 
[097) عالأمنةه كعأونك عأوذالا 6اناد]0 5 ١3091029‏ قالا 
|0171| 5ت 5غأ0ناك عأوداا 
]01 30هامع/0 وملماة قانا 
[017] 09لع]آنا8 أنامأنا0. 
)وممنا5 ععممدم لازا 
[011 | 51301 مأناخ لمأددع5 0 
]مممنا5 امول 
زده | أمممناة مج عنأدا؟ مم 
15 عاطوع ]ثانا مرحام. ممت أدناوا وم 
1 511 1 مناكا 823 


3 5100ع/ا _امق نالا 


عند ظهور الصفحة السابقة نقوم بالضغط على الزر الأزرق اعلى على اليمين (716<0) وستظهر الصفحة التالية : 


ااحانامة وماد ماكع م50 جر 


0 إءأمدم '0ه0 007 مأ لعدمممناك ع3 ناملا 524 دع0] هلز 


0ع اماع < مداء5 غ51 < مملغورمؤوع2 ع5د36غ 034‏ < ومأأدالداكما-عم 


0313235 2031 5'ع511 01 25101231101 


5 0ع2017216 71+ 0011116101 
© مبماعد8 5عا126 ومتأدلاع طثانالا 9©؟ (0ع0ع1ع6م) نل50لاانا ‏ عملا ع525هأدم 
9 _8مناقع ١‏ 3006م عاطها ع0313025 9 أ21505ع10 ١‏ ]505 #علمعة 02130358 
*«ااعم حانلكانا 
© ماءعدء بزعا موأع)0) 55عممنا5 8 9 56/7217 3006م ععولنا 
إن 0لا5 55 
© تدع 5ا"ة! أه 0دعأاذما ععهامعم عونلا تسم حت 
١ 0213625 9‏ 03008 02130356 
© ع02]3035 ّمه مم نأداامء 8-عآنا ععممع 
© 5عا6ةأا مه ممتأداامء 8-ع1نا ععرمع 
لاضن مماع 


- 3 6اهي6» 601 نااك 
لاحظ في الصورة أعلاه في هذه الصفحة نقوم بعمل الاتصال بقاعدة البيانات من خلال ملئ الحقول على اليسار حيث : 

م25 12268895 : نوع قاعدة البيانات (تترك كماهي). 

12 12056 56125:61 172421256 : اسم السرفر المستضيف لقاعدة البيانات ويختلف من سرفر لآخر ولابد من كتابة اسم السرفر. 
2312 11561 : اسم المستخدم لقاعدة البيانات. 

: كلمة المرور. 


2212 172685356 : هنا نكتب اسم قاعدة البيانات. 
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عض 


بعد ملئ الحقول على يسار الصفحة نواصل عملية التركيب ونقوم بالضغط على الزر الأعلى على اليمين (2/0) وستظر الصفحة التالية وكما في 


الصورة: 


026]3025 01 


كا 335.23 ع2 


ملكا 554.42 1019/52 


كعأناملم 11 أأعا عممنا لعأ لمتاوع 


ستظهر الصورة أعلاه لعمل الاتصال ونقل بيانات الموقع الى قاعدة البيانات الجديد والموجودة على السرفر وبعد الانتهاء ستظهر الصفحة كما في 


الصورة التالية: 


0263025 01 


15 ]0 مع أ5 اناعم ع5 10 لععع60م 300 و16دأل ذلطا عوماء 0غ نززماع6 مناه عطأ عاعزات 
)عالهأذما 


كما في الصورة أعلاه تظهر الرسالة بتمام العملية وبنجاح. نواصل التركيب ونقوم بالضغط على الزر الأخضر (م566 71©6). ستظهر الصفحة التالية: 


5 إع5لا اعمناة 
9©؟ 301010 )ع5 )عمناة 


9 2100.1 لإ©© آناذلالا_مع الهلادع 


605010 


(أ2عم2)8) 60ماموودط 


كما نلاحظ سنحتاج لتعبئة الحقول الخاصة بوع5))1 »115 «وعن5 فقط وبقية الحقول نركها كما في في الحقل الأول سيكون اسم مدير مدير الموقع 
الحقل الثاني للبريد الالكتروني الخاص بمدير الموقع. الحقلين التاليين لكلمة المرور. ثم نواصل التركيب بالضغط على (7/6::4) وستظهر الصفحة التالية: 
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ا لا ) اعأمقم 0005 007 15 لعكمممناك ع3 ناملا 21منا جع1]0 ملا 


151560 «< ملاء5 511 < مملأهرما5ع2 ع0243635 < ومأأدالدادملاعم 


عذللةء 30ء (051ا أمع/ع0111 2 06 531 ع ”أ 01) دعلمع5 أمعاع]]أل مععلناع0 )0 عزنا بعناه م0نأد]ناوالأممء /علمعد مأ كععمعع0111 ,لع ماوع لإ|انلادد5عععناد معء0 35 511 ]ناملا (أوناهطا معاع 
0016 اكع اطنا0ا 6ناه 0أ (كممتأنااه5 6أع1 300) كعذنادء 0010م 1300لممء 0051 ع1 لعأععاامءع عنلذط عللا ,5ع ناذذا (أعنا5 10 ]]0ممناك ع10/ا0)م أممم3ءع عللا ع تالالا .زد لع)ما5ع] )ناملا (لأآبلا كع نا55ا 
701/ناع 0ل كأطا مأ امنا عط طاأننا ناملا و1010/ا0)م ع20 علا بععمعأمع ناامء عناملا )مع .متأم امعممناعمل 


لسغط. دوعء1دوطعع /عءغ همطدء1طناهعع /5ه3ع دع عستت هل /عرم . ودماععطةطععع31 . ممم / / : قموعغط 


نا0/ .518 اناما 55ععع3 10 ولألمأ ع] "ناملا /علاعاع اللا 10ل 302 («اللادلاد عه الأننا (أملاع5 100أ2مأدع 5118 كلط) عاتلالث 300 1020 006 اننا !0001ل ,5118 ]ناملا 00 كأذالاء /ع1010 صمزغة 11م غمهة 15 35 و0ها كم 
2/5 70أنلا0ا0؟ 5 01 00 ولأذنا للماعع 1ل ذلطا علامدمعع 0غ عنادط الأللا 


0/52ا6]0 )ع(أأه عط ما مماأناط منا مدعت عطا مه كاعناء 300 مها / الامللانلا )عذثلام6 كلطأ عذماء أكناز مناكاعة8 قطععكل4 ؟ه مه341مؤ5ع 16073660ما عأ عه أرمذكاء41! دطععكلمق وصاذنا 3:2 ناملا ؟ا ٠‏ 
معمه االأد ذا ممنأهمادع؟ لعأدروعاما عطأ عه المأكاء »ا معنلا مادا / /0010 ]اللا 
قباط ووانلامااه؟ ع5 مه عاءاء عنامطة 156 01 301 وتأكنا 204 36 ناملا ؟1 ٠‏ 
غط. مأ لمط. دودعهموغط 803176] 10 131/2 2/50 /إ13] نا0/ا _ع]أ5اعالا ]ناملا 10101 016101 دم 2ع 2ع 1 مغ مصة ع1 7101ماع 0 12/01وم0]م 18 ]ناملا عذنا لقع ناملا كالة؟ ع5اع الة ؟1 ٠‏ 
غ5 1165 17652 )أ خصة . مصذم 10 قط . 1ه1 . مذع 


200/01 ددء. 


ع06عع]ع) ]ناملا )10 30م ذأطأ أناه أمأمم 10 أمدنلا 012 ناملا 


3 101أ5)ع/ اماق لاللاه 


من خلال الصفحة في الصورة اعلاه نقوم بالضغط على الزر الأحمر (111:2)01-7) 1251211261012 112 ©1262207) وستظهر النافذة التالية: 


إعغ!5 اناملا 5110لا 51211 0غ /إال0 2ع 


5ن )10 لا6830 5 ع]]5 )ناملا 3110 62/7010 ع6 35 /[امأع016 صمدغع12ل1مهغ مص 11 
01116865 107أ3]ناو ألم )علمع5 10 عنال ,عع اردع 0علمتأمع01 عللا 25 ,21 عأمم عدوعاط 
ع أاناكلمء ع35عام 05مم3 815 )| .5112 )ناملا (لأأننا و0لا0ثلا 5ع0ا5ذا 5007 ع/21 /121 ناملا 


انا ولأنناهااه؟ 
ععلمع]عع) عالاأنااً ناملا 1017 لجالا 1526 80011311 :م11 
1001-60 51185 ]ناملا ]أ5ا/ا 0 الاماع6 لمم أأناط علطأ عاعناء ببرول؟ 


0ع-001؟؟ 5'ع511 اناملا 11 


نقوم بالضغط على الزر الاخضر اعلاه وسيتم التوجه للموقع وبذلك يكون قد انهينا تركيب الموقع وسيكون شكل الموقع النهائي كما في الصورة : 
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مدنا 


الرئيسية خدماتنا حول رواد التكنولوجيا2 الأقسام أخبار رواد التكنولوجيا ١‏ اتصل ينا 


هََألاك الرواد لتكنولوجيا المعلومات 


12 


2 5 .6 |2 
شبكات وصيانة حاسوب 11١‏ تل 
تصمم تديكات يأحدت التقنيات ويكل احتراقية وتقدم خدمات الصيانة للحاسيات والشبكات 5غ ن|امممُْ عوممام| 
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210 


741101 1111م ااا 1111 ناد 


تحسين محركات البحث 
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الوا 
الباب النسادس 51:0 


مقدمة حول محركات البحث و 510 
المواقع الالكترونية عبارة عن واجهة رسمية وتسويقية للمؤسسة اضافة الى ان المواقع الالكترونية تعتبر اداة تسويق للمؤسسة سواء التجارية أو 
غيرها ولكثرة المواقع الالكترونية وتشابه مجالاتها وبالألاف وربما بالملايين فلابد من يكون لكل موقع الأولوية في محركات البحث والوصول إليها. 


هناك الملايين من المتصفحين الذين يستخدمون محركات البحث للبحث عما يريدونه وليس كل موقع إلكتروني وإن كان مصمم بواجهة جميلة ومميزة 
بأن يكون في صدارة المواقع في محركات البحث. هنا مميزات تقنية وفنية لابد من توفرها وأن يكون الموقع الالكتروني صديق لمحركات البحث. وجدت 
تقنية نستطيع من خلالها أن نجعل الموقع الالكتروني أكثر تأقلما مع محركات البحث وتقنيات بروزه كموقع له أولوية الظهور في محركات البحث. 


ما هو محرك البحث (ع1داع 12 طاعندوء5) ؟ 


هو عبارة عن اداة في الانترنت يقوم بعمل بحث في فهرس ووثائق عن مصطلح أو عبارة او نص معين بواسطة المستخدم أو المتصفح. ويستخدم هذا 
الاسم عادة للإشارة إلى محركات البحث على شبكة الإنترنت الكبيرة التي تبحث من خلال مليارات الصفحات على شبكة الانترنت. 


ماهي (51:00) 11212261011 م0) عستعص1ا طاععروء5 ؟ 


ترجمتها (تحسين محركات البحث) ولكن التعبير الصحيح هو التحسين الفني الأمثل للموقع الإلكتروني ولكون الموقع الالكتروني له الأولوية والحضور 
في فهارس محركات البحث وضمن ترتيب مميز وأن يكون صديق لها. و تساعدنا هذه التقنية لتحسين ترتيب الصفحات بواسطة العوامل المؤثرة 
وتحسينها للحصول على ترتيب مميز في محركات البحث. 


أشهر محركات البحث 


من أشهر محركات البحث (ع[45 - عدذ8 - 11511 - 0م0طه7آ - عاع600 ). 


كيف تعمل محركات البحث 
الزحف العنكبوتي (”01:3::15» 1061م9) على الويب للعثور على الصفحات والنصوص وايجاد الوثائق الجديد بواسطة الروابط (وعلصناتيءم3) 
الموجودة في الصفحات وفي قواعد البيانات في المواقع الالكترونية. 


تقوم محركات البحث بفهرسة الوثائق والنصوص والأكواد وحفظها في قواعد بيانات خاصة بها وتحديثها كل فترة. 


عند طلب المستخدم لأي كلمة أو مصطلح بواسطة البحث عن يقوم محرك البحث بالبحث عن هذه الكلمة أو الجملة في قاعدة بيانات المفهرسة (وليس 


تقوم محركات البحث بترتيب النتائج التي تم البحث عنها بواسطة خوارزمية ترتيب (ترتيب الأولوية). 
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م 
لماذا نهتم بالتعامل مع محركات البحث 
نهتم بالتعامل مع محركات البحث لعدة أسباب ومنها : 
تعتبر محركات البحث هي المصدر الأول والوسيلة الأولى للوصول الى المعلومة على شبكة الانترنت. 


نهتم بمحركات البحث لكي يكون الموقع الخاص بنا صديق لها وتكون له الأولوية في الظهور في النتائج الأولى لأن الباحث لا يرى في الغالب بعد العشر 
النتائج الاولى وربما أقل. 


موفر من حيث تكاليف الإعلانات. 


نصائح عامة لتطوير استراتيجية جيدة في (580) 

تعيين الكلمات المفتاحية للموقع وللعلم تعتبر الكلمات المفتاحية الروح لل((5170) فهي إما تجعل الموقع في القمة أو العكس وتم عملها في أكواد الموقع 
سواء للصفحات الرئيسية أو الفرعية. ويمكن الاستعانة بوسيلة ( 1001 1223570101 0016'5©) ) وهي وسيلة مدفوعة (بمقابل) بالنسبة للمؤفسسات 
التجارية. 

القيام بعمل كلمات مفتاحية في عدة صفحات للموقع ويفضل أن تكون في العناوين للصفحات والروابط ضمن الصفحات أو القوائم لتعدد فرص واحتمالية 
ظهور الصفحات أو بعضها او أحدها على الاقل. 

إنشاء مدونة إن أمكن. إن انشاء مدونة للموقع تساعد في تعدد فرص الوصول للموقع من خلال الكلمات والنصوص والمقالات أو المشاركات والتعليقات 
المضافة في المدونة والمختصة في نفس الكلمات المفتاحية التي يتم البحث عنها. كأن يتم عمل مدونة في مجال المواقع الالكترونية في موقع متخصص 
في المواقع الالكترونية. 

العمل على مشاركة الرابط الخاص بالموقع مع مواقع أخرى ونشره ضمن صفحات التواصل الاجتماعي وادلة المواقع الالكترونية وعمل رابط للموقع 


ضمن مدونات أو منتديات خارج الموقع والتوجيه إليه. 


كن على إطلاع وبحث دائم في كل جديد بخصوص (5170). 
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أساسيات (82515 580) 


عمل عناوين دقيقة وواضحة 


من أهم العوامل في ال5170 عمل العناوين الواضحة والفريدة من نوعها ويتم عمل العناوين كما تعلمنا مسبقا داخل الوسم أو الكود <1111,17> حيث 
أن هذا العنوان يخبر محرك البحث والمستخدم على حد سواء بالموضوع الموجود على الصفحة. بالإضافة إلى أن العناوين يتم عرضها في نتائج البحث 
لهذا فإن اختيار العناوين مهمة وتعمل دور التسويق وجذب الانتباه للصفحة او الموقع او الموضوع. يجب ان يكون العنوان مرتبط تماما بمحتوى 
الصفحة وان لا يكون عكس ذلك. بالإضافة لأن يكون لكل صفحة عنوان خاص بها. كما ينصح بعمل عناوين صغيرة ووصفية في نفس الوقت. 


مثال : 


عمل عنوان داخل وسم (1111117) 


<0هعط> 
</ "2-8 جاجع وطاقطه :تغط رعرع "حتت رمج مه "8ه25625-15ه0 "1157ل 2-6 25 3ععم 


<281516/>دورة المواقع الالكترونية<251516> 
جمهعط / > 


ظهور عنوان الخبر ضمن نتائج البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل . 


يفة 26سبتمبر - افتتاح المرصد العربي للعمل التطوعي ... 
9- نمم أطههدوم|72م ام 5ائقاء0_ذللاء وناء0.مء265 > 


النى أ لا ١|‏ 31 5 
لدول العربية الهادف إلى نشر مقاهيم 


افتتح اليوم بصنعاء المرصد العربي للعمل التطوعي التايع لجامعة 


العمل التطوعى فى اساط المجتمع اليمنى . وقى حقل الافتتاح .. 


عمل العلامة الوصفية (102)م 1و1 12ع01) 


إن العلامة الوصفية تخبر محركات البحث عن خلاصة المحتوى للصفحة وما تتحدث عنه لذلك دائما يتوجب الاهتمام بالوصف الخاص بالصفحات او 
العناوين والأخبار. وتكون البيانات الوصفية عبارة عن جملة معينة وعدة كلمات تصف المحتوى للصفحة كما تكتب هذه البيانات في داخل منطقة 


<12620> الخاصة بصفحة الويب. 
مثال : 


عند البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل تظهر في النتيجة عنوان الموقع بالإضافة الى ال(1102م 1250 12»ع01) 
التي تحت عنوان الموقع. 


المرصد العربي للعمل التطوعي 


عم ون :718051 >< ونه وطهام/ 
المرصد العريي للعمل التطوعي التابع للاتحاد العربي للعمل التطوعي فى 


صورة لعمل بيانات وصفية (17»501170101 381668) في سطر : 
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<520ع2> 
</ "6112-8 2825طت ‏ : للمشطط /ععدعج "-26 66 2م "0025625-1156"-0111 2552-6 68> 
<1216+/>دورة المواقع الالكترونتية<51516> 


<"هتا وصفف الموقع ..وصف مبسط"->02267225 "08302121251012 ">-23106 05> 
حمدعط/ > 


عند كتابة البيانات الوصفية علينا ان نتجنب كتابة بيانات بعيدة عن محتوى الصفحة ولا تمت لها بصلة. كما ان لا نضيف اوصاف عامة مثل (هذه 
الصفحة .. - صفحة حول .... ) . ان تكون البيانات الوصفية مطابقة للكلمات المفتاحية وان لا تكون مختلفة. كما علينا ان لا نقوم بعمل بيانات وصفية 
واحدة لجميع الصفحات وانما كل صفحة تحوي بيانات وصفية تصف محتوى الصفحة. 


تحسين هيكل الموقع الالكتروني 


تحسين هيكل عناوين المواقع (روابط الموقع او الصفحات 71*1.5]) 

نقصد بعناوين الموقع الروابط (1121.5]) وهنا نقوم بعمل روابط تصب في دعم الترتيب للموقع الالكتروني. ولكي نقوم بعمل جيد لإشهار محتوى الموقع 
علينا الربط بين التقنيات التي نستخدمها ونقوم بعمل نوع من التكامل بينها فمثلا البيانات الوصفية والعنوان والكلمات المفتاحية كيف نقوم بعمل تكامل 
معها ومع هيكل او رابط (عنوان الشريط للموقع). 


هناك روبط غير صديقة والتي تقوم يمر من خلالها محرك البحث ويكتفي فقط بالبيانات الوصفية او العنوان لمحتوى الصفحة ومثال على بعض الروابط 
التي نقوم بتجنب عملها قدر الامكان مثل الرابط الموجود في الصورة: 


ممع /ملام»ء100أ/وءه.دطهاه 35] | 26 ير 


كما في الصورة يتضح من الرابط الخاص بها عدم الوضوح او الفهم للأرقام الموجودة فيه وقد تكون عبارة عن رموز أحيانا. 


وهنا ايضا روابط صديقة وتقوم بعمل تكامل مع عنوان الصفحة الخاص بالمحتوى وايضا مع البيانات الوصفية والكلمات المفتاحية للموقع او صفحات 
الموقع ومثال على الروابط الصديقة 


«. 386 ١ ]5 ٠0هاهطو.ه:ور/أ00ءاءمالم/2013-04-‎ 


كما نلاحظ الصورة أعلاه لرابط صديق لمحركات البحث بالإضافة الى انه رابط لموضوع معين الا انه يخبر المتصفح ومحرك البحث بمحتوى الصفحة 
ايضا. كما ان الرابط يظهر في محركات البحث ضمن النتائج كما في الصورة: 


حوالى 11,400 من النتائج (عدد التوانى: 0.91) 


مركز لبنان للعمل النطوعي بنفذ دورة تدرببية عن كيفية ... 


..-مركز-لينان للعمل- التطوحي-يتقة-دور 5-تدريبية عن- 5 ./019 هي - 
نقد مركز لبنان للعمز التطوٌّعي. دورة تدريبية لعدد من المتملوعات. عن كيفية إيتكار أنشطة تصب فى 
خدمة المجتمع قكرة الا شاط إلى ال 1 


خغء من فكر ى مويل والتنقيذ وا 


نلاحظ كيف ظهر العنوان في محرك البحث في جوجل عند البحث عنه وكما نلاحظ أيضا الرابط تحت العنوان والذي يحمل اللون الاخضر يحتوي على 
الكلمات الموجودة ضمن الرابط. كما انها تكون مفيدة ضمن الزحف العنكبوتي الخاص بمحركات البحث (ع12[؟35"©). 


عند عمل الروابط نتجنب بعض الاشياء ومنها عمل اسم معين ومكرر في روابط الصفحات (عدم تكرار العنوان ضمن الرابط). كما نتجنب عمل الروابط 
الطويلة وغير الهامة» كما نتجنب ايضا عنوان مكرر لكل الصفحات. 
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تسهيل التنقل والتصفح داخل الموقع الالكتروني 
التنقل داخل الموقع الالكتروني مهم بالنسبة للشخص المتصفح فالموقع المرتب من حيث البيانات والأقسام والملفات والمجلدات يجعل الموقع سهل 
التصفح والفهم للمستخدم ولمحرك البحث بالإضافة الى سرعة التنقل بين العناوين والصفحات. 


نقوم بعملية التقسيم للموقع والأقسام وكل بند يندرج ضمن القسم الخاص به سواء الاقسام المتفرعة من قسم آخر وهكذا. بالإضافة الى عمل ترتيب 
لمحتوى الموقع من حيث المجلدات والصورة وترتيبها بشكل منظم ومثال على ذلك كما في الصورة: 


أنامتاة 


8] 


65 البع- معام 


1900-1949 
1950-1999 


116قهه ام -2000 


8اناأعناأة لااماءهر ال 116 
0 هغأأقطهنة! (/5]1 ناه 101 
.0ه الواموهط 


عمل خارطة للموقع بصيغة ,7200111 


تسهل خريطة الموقع والتي تكون من نوع ,757311 على محركات البحث عملية استكشاف محتوى الموقع الالكتروني وصفحاته ويتم عمل خارطة الموقع 
من هذا النوع إما يدويا او عن طريق مواقع على الانترنت تقوم بهذه الوظيفة وبوسطة وضع موقعك الالكتروني واعطائك خارطة للموقع الخاصة بك. 


بعد اتمام عملية انشاء الخارطة الخاصة بالموقع ضمن ملف الم2711 يتم ادراجها في (20015 751161512225161 ) ولإنشاء خارطة موقع يمكنك عملها 
على احد المواقع الالكترونية مثل (:62612)01© 516623277 2011 ) . 
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مثال لخارطة موقع (1/1)«) 


:22105 510153 كذ معنا غء تصدكه0 عط غ1 طلا لع نم3550 هلله متا ع1ئزاد نزتنة ع'كقط 10 تدع م30 204 0025 م81 لاله عنط1 


<"9 . 0 /2 قتع 5 51 / 1251135 5 / 02 . 5611825 1 5 . 710711 / / : 562 1"-201125 1121565 > ؟ 
<121 > ؟ 


< 22 32062 اك / >7 0<04311ه: 2ع و سصقطك > 
<1121/> 
<121 > ؟ 
<10 /, > وطح . عد 220 /لططم ع 26 . هم 31 «ططعع ع . امازواتما / / : عع ط<ء 10> 
<5>/22102117 . 21023112<0«> 
< 3206222 طك / >7 0<04311ه: 2ع و مقط > 


/1121< 


<151004 135 />00 : 23+00 : 19 : 135151100<2014-04-06115> 
<2021226ة2ء />0<0431117وع< 2ع وصقطك > 


كما في الصورة أعلاه نلاحظ كيفية عمل خارطة للموقع وكمثال على ذلك تم عمل خارطة للموقع الذي قمنا بتطبيقه (التطبيق العام م46ام) وتظهر في 
الصورة أعلاه الخارطة وهي تحوي القائمة ومحتوياتها. 


التحسين الامثل لمحتوى الموقع 


المواقع المثيرة للاهتمام تزيد من الاعتراف بها 


كلما كانت الموقع الالكتروني مثار اهتمام عند الاخرين كلما كانت عملية الزيارة تزداد مع الوقت بالإضافة الى تسويق المتصفحين للموقع 
وإخبار الآخرين للطلاع عليه والشهادة بتميزه وامكانية مشاركته مع الآخرين في المدونات وصفحات التواصل الاجتماعي. لذلك اهمية 
المحتوى عامل مهم في زيادة الزيارات للموقع الالكتروني. 


إثراء المواضيع بالعبارات وعناصر المحتوى بالمصطلحات المتعلقة او التي لها علاقة بالمواضيع. 


في المواضيع التي تقدم ضمن الموقع لابد من اختيار الموضوع الأكثر أهمية وأن يراعى فيه اختيار العبارات المتعلقة بالموضوع وذلك 
لان المستخدم الذي يبحث عن هذا الموضوع قد يبحث عن كلمات اخرى غير العنوان لذلك نهتم بالعبارات والعناصر المرتبطة بالموضوع. 
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حول محتوى الموقع 


في كتابة المواضيع في الموقع الالكتروني لابد من الالتزام ببعض الخصائص ومنها عدم التكلف في كتابة المواضيع وزيادتها ولكن يتم 
كتابة المواضيع بكل سهولة وتسهيل قراءتها. كما يتم تجنب عمل الشروحات أو الكتابة في الصور والسبب لأن هناك مستخدمين يريدون 
نسخ النص أو الشرح بالإضافة الى ان محركات البحث لا تتعرف على محتوى الصور (الشرح والمواضيع). 

كما يفضل ترتيب محتوى المواضيع من حيث التنظيم والتنسيق للنصوص والصور كي يعرف المتصفح بداية ونهاية الموضوع بالإضافة 
للمحتوى وأقسامه. 

التعامل مع الصور في الموقع الالكتروني 

عند عمل محتوى للموقع الالكتروني فإننا نأخذ في عين الاعتبار أهمية وجود الصورة الداعمة للموضوع وعليه فإن علينا دعم الصورة 
بخاصية بسيطة وهي خاصية (21) وقد تعلمناها مسبقا وتفيدنا في ظهور الصورة في البحث عن نص موافق للموضوع الخاص بنا في 


(البحث عن الصورع). بالإضافة لتنظيم أماكن الصور وترتيبها وجعلها في مجلدات خاصة بها. 


استخدام وسوم العناوين (وع12 ع12»201) 


تبدأ العناوين من <111> الى <116> حسب الأهمية هذه العناوين تنوع أهمية المحتوى داخل المواضيع فالعناوين الكبيرة تشير للأهمية للمتصفح كماهي 
أيضا اكثر فهما لمحركات البحث ويفهمها محرك البحث حسب الأهمية (حجم النص). 


التعامل مع خوارزميات او برامج البحث 


استخدام ملف ()1:01015.):2) 


من الوسائل المستخدمة للتعامل مع محركات البحث انشاء ملف ال2010145.26 وتكمن وظيفة هذا الملف في أنه يخبر محركات البحث في ما اذا كان 
بالإمكان الزحف لبعض اجزاء الموقع وترك بعضه. كما يجب أن يكون اسم الملف بهذا الاسم ):0170145.6 بالإضافة الى ان يكون في المجلد الرئيس 
للموقع. 

هناك في الموقع بعض الاجزاء التي لا تريد لمحركات البحث الوصول اليها وربما تعتبر غير مفيدة للمستخدم او المتصفح للموقع ولذلك يمكننا الاستعانة 
بملف ال7:01045.626 واعطاء بعض الاوامر للملف بالزحف لبعض المجلد او الصفحات وترك أخرى. يمكننا عمل الملف يدويا او الاستعانة بأدوات 
جوجل على موقع جوجل من خلال 5612612401 1:01045.64. كما يمكننا الاستعانة بالإرشادات الموجودة ضمن صفحات الدعم الخاصة بجوجل على 
15 )::).100)5 عتطأكنا. 
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طريقة عمل ملف 1:0501)5.)26 


هنا بعض الاوامر التي يمكننا وضعها ضمن ملف الروبوتس للزحف على الصفحات او عدم الزحف عليها وعلى المجلدات ايضا ومنها : 


١ د‎ 


5 


* بأسعع2-رء 115 


الكود أعلاه عبارة عن أمر يسمح لجميع العناكب بالزحف لمحتوى الموقع مثل جوجل و ياهو الخ. 


الكود أعلاه لمنع محركات البحث من الزحف على الصفحة 17م.22فع10 والموجودة داخل المجلد 2):112. 


كود" ( : 411018) 


65 :1071آى 
دعع قت :الث 


الكود أعلاه مثال لعملية السماح للزحف على مجلدات معينة وكما في الكود (مجلد 5م - مجلد وعع1212 ). 


كوده (:م22ء510) 


[تدع:. ممع )1ك اعد متمطعع ).بج //:ماغط :مهس از 
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ملاحظة : نظام جوملا يحوي ملف الروبوتس 10170145.626 وموجود مسبقا وغالبا في المواقع الكود المستخدم هو 1(15211017. كما يمكننا الاستفادة 
أكثر حول ملف 10105.66 عن طريق الموقع المعروف ب(وع2726 1208005 51:6 عط1) . 


استخدام كود (''001011057''-1»: ) 


لأن الروابط الموجودة على الانترنت من الاولوية لمحركات البحث ولأن الزحف الخاص بمحركات البحث يعطي أولوية للروابط على الانترنت فهناك 
روابط لا نريد من محركات البحث ارشفة او الزحف على صفحات لا نريدها ان تظهر في نتائج محركات البحث يتم استخدام الكود ''101011089''-1©1 
لمنع محركات البحث من ارشفة بعض الروابط . 


<دج/>صفحة خاصةح''0110,مس''حاعم ''ممام.ء)2 كتوم /أعس.متمطعء) جوو بوط "معط ود 


كما في الكود أعلاه اضفنا كود المنع على احد الروابط لاحد الصفحات التي لا نريد عرضها على الاخرين ولا ارشفتها او نتائج محركات البحث. 


متابعة وترقية الموقع الالكتروني 


ليكون الموقع الالكتروني الخاص بنا ضمن المواقع الصديقة لمحركات البحث علينا أن نجعل الموقع الالكتروني محط اهتمام ومتابعة لمحتوى الموقع 
وحالته مع محركات البحث وهنا بعض النصائح العامة لمتابعة الموقع الالكتروني والتحسين من ظهوره في النتائج الاولى في محركات البحث: 


اضافة الموقع الالكتروني ضمن حساب خاص في جوجل وربطه واضافته الى محرك البحث جوجل وذلك عن طريق ( “ع)25«تداء'575 »0021© 


015 1). 
متابعة حالة الموقع في (1'0015 7ع122256طا»7517 ©1ع200)) واصلاح اي اخطاء تعيق أرشفة الموقع. 


ربط الموقع الالكتروني بصفحات التواصل الاجتماعي وامكانية مشاركته في صفحات التواصل من المستخدمين. 
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أدوات مفيدة لتعزيز نجاح الموقع فى 57:0 


ود عاع200) 

تدع 2نستام0) عأزوطء !11 عاع0060©) 

510 تنه عستتنط دده كمت1 

(17اع1] «تعأمقدططء "11 عاع060) 
15 نع )كه حططاء 11 علع 00> 


ك0 25161 2تاجاء 11 علاع 00> 


ع" 'لا11غ غ2ثالا ,51]015آلا “لاملا 01 ع16نا50د عا لداع 
5 )211111113112 3110 ,نر أنلاعايا 

121آنلا ع5 0غ 02065 “لاملا 011 11]5 006111116 1اللعآا 
غ"011نانا 1231آننا 30ج عانزمناا الأنلاء 

5م م165 ,2101 غ1 غ2 00 0 301لا "0011 لاملا 11 
011103117 51850 311 1005© ناملا ماعط 10نا10!ك5. 

أع ١٠‏ 01110672 الا0 011 >أع3طلعع1 01 110115أدعنالن ع2أاوجلا! 
1101| ذلاء 

ناملا !]آنلا 116612615 م0001 تلامط ع1611112م0 
كماع بلا. 

/أأقنانو 320 ب,اأقءتاضاعع ‏ ,أتاع0116© ,رتروأاوعط 
60001 110111 كع11ا10لال. 
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تم بحمد الله 
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معد الكتاب الالكترونى 
) سيرة ذاتية ( 


نماثاكا شخصية: 
الاسم : يوسف صالح علي الجرعي 

تاريخ الميلاد : 949١م‏ 

الجنسية : اليمن تاريخ 

محل الميلاد : المملكة العربية السعودية - الرياض 

الإقامة : الجمهورية اليمنية - أمانة العاصمة 

معلومات التواصل : 

البريد الإلكتروني :72100.01 ©12_5115111© 

رقم الهاتف الجوال: )٠0955111١4495٠.6٠.00(‏ أو جوال + واتس اب (5١٠5ههلا؟/الالا95..)‏ 
الدولة : صنعاء - أمانة العاصمة ( اليمن ) 

العنوان الإلكتروني : 0.121 771طع ).777717 

التعليم والمؤهلات: 

بكالوريوس نظم معلومات - جامعة صنعاء (كلية الحاسوب وتكنولوجيا المعلومات). 

دبلوم تصميم مواقع الكترونية ( معهد سيدز). 

المهارات والخبرة : 

إنشاء وإدارة وتدريب تصميم وادارة مواقع الكترونية. 

تسويق وإعلام إلكتروني. 

تصميم وإدارة نشرات إلكترونية. 


صيانة وحماية حاسوب. 
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ل 


